在CSS中裁剪图像

Question

我已经创建了一个双列网格图像,可以在全景图像中正常工作:链接.但是,我添加了一个抛出布局的肖像图像,所以我希望能够"裁剪"图像,使高度与其他图像相匹配.我尝试使用负边距,但它没有效果:

.portrait-crop
{
    overflow: hidden;
}

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

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

作为参考,这是我的代码.

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>

工作小提琴

编辑: 具有固定高度行的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>

工作小提琴

Answer 2

你需要给容器增加一些高度,如果没有,它不知道应该显示它内部的含量.

你可以尝试这样的事情.

.portrait-crop{
    display: inline-block;
    height: 215px;
    width: 50%;
    overflow: hidden;
}



.portrait-crop img{
    width: 100%;
}