Html 如何在 CSS 中修剪图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26101774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to trim off Image in CSS?
提问by Tum
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".
好的，问题来了，我的应用程序允许用户插入任何图像。由他们决定插入非常大或非常长的图像。但是当我租用图像时，我想要width="50px"和height="100px"。
ok if I do
好的，如果我这样做
.myImage{
width:50px;
height: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:50pxthen if the height>100px, then CSS will trim off the bottom.
Ok, let see this example, user inserted a big image with width=150pxand 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:
那么图像可能会失真，因为比例不准确。所以，这就是我的想法。首先，我希望图像具有width:50px然后如果height>100px，则 CSS 将从底部修剪掉。好的，让我们看看这个例子，用户用width=150px和插入了一个大图像height=600px。因此，如果我将宽度减小到50px，则高度将为200px。我想剪下图像的底部，这样它只会显示(w: 50px, h: 100px)看到图片：
So how to do that?
那么怎么做呢？
回答by Justinas
1) Trim image with <div>and overflow:hidden:
1) 用<div>和修剪图像overflow:hidden：
div.trim {
max-height:100px;
max-width: 50px;
overflow: hidden;
}
<div class="trim"><img src="veryBigImage.png"/></div>
2) Use max-width: 50px;and max-height: 100pxfor image itself. So image will preserve it's dimensions
2) 使用max-width: 50px;和max-height: 100px用于图像本身。所以图像将保留它的尺寸
回答by starvator
回答by MeLight
You need to put the image in a container of the desired trim size with overflow:hidden
您需要将图像放入所需修剪尺寸的容器中 overflow:hidden
html:
html：
<div id="container"><img src="myimage.jpg"/></div>
css:
css：
#container {width:50px;height:100px;overflow:hidden}
#container img {width:50px;}
回答by ExCluSiv3
By using max-width and max-height you can set height to whatever you want and the full image will display.
通过使用 max-width 和 max-height，您可以将高度设置为您想要的任何值，并且将显示完整图像。
.myImage{
height:auto;
width:auto;
max-width:300px;
max-height:300px;
}
回答by Jmh2013
You could wrap the imgwith a divand apply overflow: hidden;
你可以img用 a包裹div并应用overflow: hidden;
HTML:
HTML：
<div class="img-wrapper">
<img src="path/to/image.jpg" />
</div>
CSS:
CSS：
.img-wrapper{
max-height: 100px;
overflow: hidden;
}
.img-wrapper img{
width: 50px;
}
