html - 如何修剪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对于图像本身。所以图像将保留它的尺寸