html - 在 CSS 中裁剪图像

Question

我创建了一个两列的图像网格，它适用于所有风景图像:Link .但是，我添加了一张与布局不符的肖像图像，因此我希望能够“裁剪”图像，使高度与其他图像相匹配。 I tried using a negative margin , 但它没有效果:

.portrait-crop
{
    overflow: hidden;
}

img.portrait-crop
{
    margin-bottom: -30px;
}

我不确定我做错了什么。任何帮助将不胜感激。

供引用，this is my code .

Answer 1

您可以像这样裁剪 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>

Working Fiddle

编辑:具有固定高度行的 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");'>&nbsp;</div>
    <div class='img' style='background: url("some-other-image");'>&nbsp;</div>
</div>
<div class='row'>
    <div class='img' style='background: url("foo-image");'>&nbsp;</div>
    <div class='img' style='background: url("bar-image");'>&nbsp;</div>
</div>

Working Fiddle