Question

我创建了一个双列网格图片，可以使用全景图像：Link。但是，我添加了一个抛出布局的肖像图像，所以我希望能够“裁剪”＃34;图像使高度与其他图像相匹配。 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

enter image description here

修改具有固定高度行的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>

<强> Working Fiddle

Answer 2

你也需要在容器上加一些高度，如果没有，它不知道应该显示它内部的含量。

你可以尝试这样的事情。

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



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

Answer 3

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

您的问题出在CSS选择器上。

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

将图像与肖像作物类匹配。

但是这个

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

匹配protrait-crop容器内的图像。

Answer 4

这个CSS怎么样：

img { height: 280px; }
.portrait-crop { height: 560px; }

http://jsfiddle.net/91z2wxfy/2/

Answer 5

一种可能的解决方案，只使用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/

Answer 6

你可以使用CSS3在一个div中非常优雅地处理它，而不需要任何额外的容器：

＆＃13;

.portrait-crop {
    width: 300px;
    height: 100px;
    background-size: cover;
    background-position: center;
}

＆＃13;

<div class="portrait-crop" style="background: url(https://www.google.ca/images/srpr/logo11w.png);"></div>

＆＃13;

Answer 7

试一试。在潜水中使用固定宽度和高度的溢出环绕img标签，并根据其方向应用宽度或高度试试这个

    .overflow{
      overflow: hidden;
      width: 400px;
      height: 271px;   
     }

    .overflow img{
       overflow: hidden;
       width: 400px;
    }

http://jsfiddle.net/91z2wxfy/9/

Answer 8

我，这里是full post How top crop images

在CSS中裁剪图像

8 个答案: