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

时间:2013-07-19 11:58:24

标签: html css crop

假设我有250 width and 250 height的图片,我想将其裁剪为90x90

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

这是裁剪图像的CSS代码,但我该如何调整它?

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

2 个答案:

答案 0 :(得分:7)

<方法1

适用于水平矩形图像(宽度较大),如果您需要垂直图像,可以更改height:100%的{​​{1}}

<强> HTML

width:100%

<强> CSS

<div class="img-container">
    <img src="http://lorempixel.com/250/250" />
</div>

Example fiddle 第一张图片已调整大小,第二张图片被裁剪

<方法2

适用于所有图像尺寸

<强> HTML

.img-container {
    width: 90px;
    height: 90px;
    overflow: hidden;
}
.img-container img {
    height: 100%;
}

<强> CSS

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

<强> Example fiddle

答案 1 :(得分:1)

试试这个

<div style="width:90px; height:90px; overflow:hidden;">
<img src="Message.png"/>
</div>