假设我有一个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%;
}

Example fiddle第一个图像被调整大小,第二个被裁剪
方法2
适用于所有图像大小
HTML格式
<div class="img" style="background-image:url('http://lorempixel.com/250/250')"></div>

CSS
.img{
    width: 90px;
    height: 90px;
    background-size: cover;
}

Example fiddle

09-25 16:35