在 CSS 中裁剪图像答案

【问题标题】：Crop image in CSS在 CSS 中裁剪图像
【发布时间】：2014-11-30 20:57:53
【问题描述】：

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

.portrait-crop
{
    overflow: hidden;
}

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

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

供参考，this is my code。

【问题讨论】：

你的选择器不好。使用.protrait-crop img intead

标签： html css image crop

【解决方案1】：

你可以像这样裁剪imgs：

CSS：

.crop-container {
    width: 200px;
    height: 300px;
    overflow: hidden;
}
.crop-container img {
    margin-top: -100px;
    margin-left: -200px;
}

调整容器的height和width，调整裁剪后的img的尺寸，调整img元素本身上的负数margin-top和margin-left的数量，选择哪一部分要裁剪到的图像。

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

【讨论】：

我试过了，结果很奇怪；图像被调整大小并在其他人使用的空间中居中。不知道为什么。
您仍然需要指定将原始图像缩小到的尺寸。如果您想要网格类型的图像布局，您还需要为 .crop-container 元素提供 CSS：display: inline-block;。
我不太明白，但谢谢。我得继续玩下去。

【解决方案2】：

你还需要给容器设置一些高度，如果没有，它不知道它应该显示多少里面的内容。

你可以试试这样的。

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



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

【讨论】：

嗯不知道为什么，但这会缩小图像以适应垂直方向，但随后会变得太窄并且无法裁剪。
width: 100% 正在缩放img 到.portrait-crop（其父元素）的宽度

【解决方案3】：

您可以使用 CSS3 在单个 div 中非常优雅地处理此问题，而无需任何额外的容器：

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

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

【讨论】：

问题是我的图片src需要匹配href才能触发网站的灯箱。
是的，我注意到了。看起来该站点并没有真正使用当前的东西，所以触发器被包裹起来需要和标记。我确实注意到您正在使用 jQuery，因此在页面加载后使用一些魔法来应用此技术可能是一个不错的选择。我没有时间处理布局。您也可以尝试将灯箱照片框应用到 div，通常您可以使用 rel="foo"，然后使用 href="somephoto"，它会抓取 href 作为图像 src，同时仍然可以应用 style= “”作为背景。
负边距的问题是它们已经过时并且因浏览器而异，此时 CSS 背景几乎完全实现且一致：w3schools.com/cssref/css3_pr_background-size.asp。我最近在我目前正在从事的项目中遇到了一个类似的问题需要解决，这就是为什么 CSS 解决方案在我脑海中浮现的原因 :)
非常适合我

【解决方案4】：

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

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

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

将图像与肖像裁剪类匹配。

但是这个

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

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

【讨论】：

【解决方案5】：

这个 CSS 怎么样：

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

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

【讨论】：

在他的实际网站上，它需要是 .portrait-crop { height: 431px; } 以便在他最广泛的布局中工作。但是在没有对布局进行重大更改的情况下，宽度和高度存在比例问题。
这不会裁剪任何东西，只会压缩/拉伸图像，坦率地说，这些图像看起来比原来的问题更糟糕。

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

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

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

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

【讨论】：

【解决方案8】：

我，这里是full post How top crop images

【讨论】：