Html 在 CSS 中裁剪图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26218954/
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
Crop image in CSS
提问by Mario Parra
I've created a two-column grid of images, which works fine with all-landscape images: Link. However, I've added a portrait image that throws off the layout, so I'd like to be able to "crop" the image so that the height matches the others'. I tried using a negative margin, but it had no effect:
我创建了一个两列的图像网格，它适用于全景观图像：Link。但是，我添加了一个脱离布局的肖像图像，所以我希望能够“裁剪”图像，使高度与其他图像相匹配。我尝试使用负边距，但没有效果：
.portrait-crop
{
overflow: hidden;
}
img.portrait-crop
{
margin-bottom: -30px;
}
I'm not sure what I'm doing wrong. Any help would be appreciated.
我不确定我做错了什么。任何帮助，将不胜感激。
For reference, this is my code.
作为参考，这是我的代码。
回答by nettux
You can crop imgs like this:
您可以img像这样裁剪s：
CSS:
CSS：
.crop-container {
width: 200px;
height: 300px;
overflow: hidden;
}
.crop-container img {
margin-top: -100px;
margin-left: -200px;
}
Adjust the heightand widthof the container to adjust the dimensions of the cropped imgand adjust the amount of negative margin-topand margin-lefton the imgelement itself to choose which part of the image to crop to.
调整height和width所述容器的调整裁剪的尺寸img和调整负的量margin-top和margin-left所述上img元件本身来选择图像的作物，其一部分。
HTML:
HTML：
<div class="crop-container">
<img src="some-img"/>
</div>
EDIT:Alternative solution for a 2 column grid with fixed height rows:
编辑：具有固定高度行的 2 列网格的替代解决方案：
CSS:
CSS：
body {
margin: 0;
}
div.img {
float: left;
width: 49%;
margin: 0.5%;
height: 100%;
background-size: cover!important;
background-repeat: no-repeat!important;
}
div.row {
height: 300px;
}
HTML:
HTML：
<div class='row'>
<div class='img' style='background: url("some-image");'> </div>
<div class='img' style='background: url("some-other-image");'> </div>
</div>
<div class='row'>
<div class='img' style='background: url("foo-image");'> </div>
<div class='img' style='background: url("bar-image");'> </div>
</div>
回答by jorgeromero
You need to put some height to the container also, if not, it doesn't know how much it should show of what it is inside.
您还需要为容器设置一些高度，否则，它不知道它应该显示多少内部内容。
You can try something like this.
你可以尝试这样的事情。
.portrait-crop{
display: inline-block;
height: 215px;
width: 50%;
overflow: hidden;
}
.portrait-crop img{
width: 100%;
}
回答by rnrneverdies
I'm not sure what I'm doing wrong. Any help would be appreciated.
我不确定我做错了什么。任何帮助，将不胜感激。
Your problem is on CSS selectors.
您的问题出在 CSS 选择器上。
img.portrait-crop
{
margin-bottom: -30px;
}
matches an image with portrait-crop class.
匹配带有portrait-crop 类的图像。
but this
但是这个
.portrait-crop img
{
margin-bottom: -30px;
}
Matches an image inside a protrait-crop container.
匹配 protrait-crop 容器内的图像。
回答by Kraang Prime
You can use CSS3 to handle this very elegantly in a single div without any extra containers :
您可以使用 CSS3 在单个 div 中非常优雅地处理此问题，而无需任何额外的容器：
.portrait-crop {
width: 300px;
height: 100px;
background-size: cover;
background-position: center;
}<div class="portrait-crop" style="background: url(https://www.google.ca/images/srpr/logo11w.png);"></div>回答by AJTECH
Give this a try. Surround the img tag in a dive with a overflow wit fixed width and height and apply a width or height depending on its orientation Try this out
试试这个。在潜水中用固定宽度和高度的溢出包围 img 标签，并根据其方向应用宽度或高度试试这个
.overflow{
overflow: hidden;
width: 400px;
height: 271px;
}
.overflow img{
overflow: hidden;
width: 400px;
}
回答by Elad Shechter
I, here a full post How top crop images
我，这里有一个完整的帖子如何顶级裁剪图像
回答by Daniel Stanley
How about this CSS:
这个 CSS 怎么样：
img { height: 280px; }
.portrait-crop { height: 560px; }
回答by Monte
One possible solution, using only css without affecting your html code is this:
一种可能的解决方案，仅使用 css 而不会影响您的 html 代码是这样的：
/* Fix for portrait */
.portrait-crop {
width:50%;
overflow:hidden;
height:179px;
display:inline-block;
}
.portrait-crop img {
width:100%;
height:auto;
}
or, adding some div (better solution): http://jsfiddle.net/yoyb9jn7/
或者，添加一些 div（更好的解决方案）：http: //jsfiddle.net/yoyb9jn7/
