如何修剪CSS中的图片? [英] How to trim off Image in CSS?

问题描述

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

Ok, here is the problem, my app allow users to insert any image. It is up to them insert very big or very long image. But when I rentder image I want the width="50px" and height="100px".

如果可以的话

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

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

then the image could be distorted cos the proportion is not accurate. So, here is what I think. First I want the image to have width:50px then if the height>100px, then CSS will trim off the bottom. Ok, let see this example, user inserted a big image with width=150px and height=600px. So if I reduce the width to 50px, the the height will be 200px. I want to cut the bottom of the image so it will show only (w: 50px, h: 100px) see the picture:

那怎么办?

推荐答案

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 .因此图像将保留其尺寸

2) Use max-width: 50px; and max-height: 100px for image itself. So image will preserve it's dimensions

这篇关于如何修剪CSS中的图片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！