如何修剪CSS中的图像？

Question

好的，这是问题所在，我的应用允许用户插入任何图片。由他们插入非常大或非常长的图像。但是当我租用图片时，我想要width="50px"和height="100px"。

好的，如果我这样做

.myImage{
   width:50px;
   height:100px;
}

然后图像可能会因为比例不准确而失真。所以，这就是我的想法。首先，我希望图像具有width:50px，然后如果height>100px，那么CSS将修剪底部。 好的，让我们看看这个例子，用户插入了一张包含width=150px和height=600px的大图片。因此，如果我将宽度减小到50px，则高度将为200px。我想剪切图像的底部，以便只显示(w: 50px, h: 100px)看到图片：

那怎么做？

Answer 1

1）使用<div>和overflow:hidden修剪图片：

 div.trim {
     max-height:100px;
     max-width: 50px;
     overflow: hidden;
 }

 <div class="trim"><img src="veryBigImage.png"/></div>

2）对图像本身使用max-width: 50px;和max-height: 100px。因此，图像将保留其尺寸

Answer 2

我建议使用CSS CLIP属性将其修剪为您想要的大小。

img {
position: absolute;
clip: rect(0px,50px,100px,0px);
width:50px;
}

这样，如果图像足够小，任何东西都不会被切断。否则，你会减少它。

Answer 3

您需要使用overflow:hidden

将图像放入所需修剪尺寸的容器中

HTML：

<div id="container"><img src="myimage.jpg"/></div>

的CSS：

#container {width:50px;height:100px;overflow:hidden}
#container img {width:50px;}

Answer 4

通过使用max-width和max-height，您可以将高度设置为您想要的任何值，并显示完整的图像。

.myImage{
    height:auto;
    width:auto;
    max-width:300px;
    max-height:300px;
}

Answer 5

您可以使用img打包div并应用overflow: hidden;

HTML：

<div class="img-wrapper">
    <img src="path/to/image.jpg" />
</div>

CSS：

.img-wrapper{
    max-height: 100px;
    overflow: hidden;
}

.img-wrapper img{
    width: 50px;
}