也许,你会遇到这样的情况,UI给你一张图片,然而根据实际情况,比如需要适配XXX手机,或者需要把图片形状搞好看一点,会让前端人员进行图片剪裁工作。
现在我们就已这个例子来对图片进行剪裁
html代码如下
<div class="img-container">
<img src="./黑人问号.jpg" alt="黑人问号"/>
</div>
css代码如下
.img-container {
width: 300px;
}
.img-container img {
width: 100%;
}
图片下面进行剪裁
现在的需求是这样的:原来尺寸是width为300px,height为299px的图片。

css代码只需要改为:
.img-container {
width: 300px;
overflow: hidden;
}
.img-container img {
width: 100%;
margin-top: -100px;
}
具体做法:设置图片的margin-top,然后把容器的overflow设置为hidden
上下都剪裁
比如把上下都剪裁50px
效果如下:
网友评论