CSS - 如何将图像裁剪为正方形,如果它已经是正方形,则调整大小

Question

让我们说我有一个图像,250 width and 250 height我想把它裁剪成90x90

它会显示图像中的像素,但如果它是矩形,我想裁剪它,如果它是正方形则调整它,那么我该怎么做呢？

这是裁剪图像的CSS代码,但如何调整大小呢？

.image{ 
    width:90px;
    height:90px;
}
.image{
    display: block;
    overflow:hidden;
    clip:rect(0px,90px,90px,0px);
}

Answer 1

方法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%;
}

示例小提琴首先调整图像大小,然后裁剪第二个图像

适用于所有图像尺寸

HTML

<div class="img" style="background-image:url('http://lorempixel.com/250/250')"></div>

CSS

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