html - 如何修剪CSS中的图片？

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

好吧，如果我愿意

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

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

那么该怎么做呢？

最佳答案

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用于图像本身。因此图像将保留其尺寸

关于html - 如何修剪CSS中的图片？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26101774/