我创建了一个两列网格的图像，它适用于所有的横向图像：Link。但是，我添加了一幅抛出布局的肖像图像，所以我希望能够“裁剪”图像，以便高度与其他图像匹配。 I tried using a negative margin，但它没有效果：在CSS中裁剪图像
.portrait-crop
{
overflow: hidden;
}
img.portrait-crop
{
margin-bottom: -30px;
}
我不知道我在做什么错。任何帮助，将不胜感激。
仅供参考，this is my code。
你需要把一些高度和容器也，如果没有，它不知道它应该多少表现的是里面有什么。
你可以尝试这样的事情。
.portrait-crop{
display: inline-block;
height: 215px;
width: 50%;
overflow: hidden;
}
.portrait-crop img{
width: 100%;
}
嗯不知道为什么，但这缩小图像以适应垂直，但然后变得太狭窄，不裁剪。 – 2014-10-06 15:41:42
'width：100％'是**缩放**'img'下降到'.portrait-crop'（其父元素）的宽度 – nettux443 2014-10-06 16:00:07
您可以裁剪img就像这样：
CSS：
.crop-container {
width: 200px;
height: 300px;
overflow: hidden;
}
.crop-container img {
margin-top: -100px;
margin-left: -200px;
}
调整height和容器的width调整裁剪img的尺寸和调整的负面量margin-top和margin-left上的img元素本身来选择要裁剪的图像的哪一部分。
HTML：
<div class="crop-container">
<img src="some-img"/>
</div>
编辑： 对于2柱网的替代解决方案具有固定高度的行：
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：
<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>
我试过了，结果很奇怪;图像被调整大小并居中在其他人使用的空间中。不知道为什么。 – 2014-10-06 16:18:30
您仍然需要指定尺寸以缩放原始图像。如果你想要一个网格类型的图像布局，你还需要给'.crop-container'元素提供CSS：'display：inline-block;'。 – nettux443 2014-10-06 16:24:17
我真的不明白，但谢谢。我必须继续玩下去。 – 2014-10-06 16:44:42
一个可能的解决方案，只使用CSS，而不会影响你的HTML代码是这样的：
/* Fix for portrait */
.portrait-crop {
width:50%;
overflow:hidden;
height:179px;
display:inline-block;
}
.portrait-crop img {
width:100%;
height:auto;
}
，或者增加一些DIV （更好的解决方案）：http://jsfiddle.net/yoyb9jn7/
我不知道我在做什么错。任何帮助，将不胜感激。
你的问题是在CSS选择器。
img.portrait-crop
{
margin-bottom: -30px;
}
匹配肖像作物类的图像。
但这
.portrait-crop img
{
margin-bottom: -30px;
}
匹配一个写真作物容器内部的图像。
您可以使用CSS3在单格非常很好地处理这种没有任何额外的容器：
.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>问题是我的图像src需要匹配href来触发网站的灯箱。 – 2014-10-06 16:14:42
负边距问题在于它们已经过时并且因浏览器而异，在这里CSS背景已经完全实现并保持一致：http://www.w3schools.com/cssref/css3_pr_background-size.asp。我最近有一个类似的问题，我需要在我目前正在进行的一个项目中解决，这就是为什么CSS解决方案在我心中是新鲜的:) – 2014-10-06 16:22:34
试试这个。环绕img标签与溢出机智固定宽度和高度的潜水和应用依赖于它的方向的宽度或高度 尝试了这一点
.overflow{
overflow: hidden;
width: 400px;
height: 271px;
}
.overflow img{
overflow: hidden;
width: 400px;
}
您选择器不好。使用'.protrait-crop img' intead – 2014-10-06 15:23:38