假设我有一个带有250 width and 250 height
的图像,我想将其裁剪为90x90
它会显示图像中的像素,但如果它是矩形,我想裁剪它,如果它是方形,我想调整它的大小,那么我该怎么做呢?
这是裁剪图像的CSS代码,但我如何调整它的大小?
.image{
width:90px;
height:90px;
}
.image{
display: block;
overflow:hidden;
clip:rect(0px,90px,90px,0px);
}
方法1
适用于水平矩形图像(宽度较大),如果需要垂直图像,可以将height:100%
更改为width:100%
HTML
<div class="img-container">
<img src="http://lorempixel.com/250/250" />
</div>
CSS
.img-container {
width: 90px;
height: 90px;
overflow: hidden;
}
.img-container img {
height: 100%;
}
示例小提琴第一个图像被调整大小,第二个被裁剪
方法2
适用于所有图像大小的
HTML
<div class="img" style="background-image:url('http://lorempixel.com/250/250')"></div>
CSS
.img{
width: 90px;
height: 90px;
background-size: cover;
}
小提琴示例
尝试这个
<div style="width:90px; height:90px; overflow:hidden;">
<img src="Message.png"/>
</div>