我已经创建了一个双列网格图像,可以在全景图像中正常工作： Link.但是,我添加了一个抛出布局的肖像图像,所以我希望能够“裁剪”图像使高度与其他高度相匹配. I tried using a negative margin,但没有效果：

.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%;
}

问题：我正在尝试将图像放在Twitter的Bootstrap的 responsive grid system中,因此它们将被缩放到给定的空间中(对于不同设备,列的响应CSS大小会有所不同).我希望他们适应长宽比 – 让我们假设它是一个平方.

如果我想要通过Bootstrap重新定位图像以适应网格设计,则Standard CSS cropping technique不起作用.负边距仅用于切割顶部和底部 – 当图像的高度必须被剪切时,宽度保持不变(例如,将肖像图像放入正方形).

我发现this technique用于指定宽高比来剪切宽度,保持高度不变(将横向图像放入正方形)与Bootstrap的缩放效果很好.

The example (jsfiddle)的裁剪图像尺寸为1600×400和400×1600.到目前为止,我在当前的Chrome和Safari中检查过.编辑：修正为也可以在Firefox.

问题：如何以一种方式做到这一点：切割宽度和高度.如何在图像上任意裁剪,选择矩形,以便通过Bootstrap正确重新定标？
如果没有图像尺寸的先前知识,可以如何裁剪某些宽高比？

谢谢任何想法！

如果您的解决方案只能在现代浏览器中运行,而且img标签不是强制性的,那么使用图像作为背景技术帮助我经常在响应式设计中.
您可以轻松地将背景放置在中央,使其适合其容器.

http://jsfiddle.net/willemvb/wAqSV/2/

当其流体宽度(基于百分比)容器太小而无法显示整个图像时，如何使图像保持居中？

如何将图像置于容器内

这意味着当容器太小时，它应该显示图像的中间而不是边。

当它工作

您可能有一个容器，其中包含一些内容，例如两个< div> s，每个宽度为50％，彼此相邻。对于这个例子，我们可以仅仅说明容器的一个孩子：

我们将命名外部矩形.container，内部矩形.content和图像img。这种安排是完全正常的，只要。内容总是比img宽。

当它打破

由于我们处理的百分比和可能使用响应式设计，这可能不总是这样。如果.content比img薄，会出现裁剪：

问题

如果img最有趣的部分是在中心，我们需要让浏览器均匀地裁剪两个边缘 – 留下最好的部分可见，无论.content的宽度。

解决方案

幸运的是，一个解决方案是可能的。更好的是，不需要额外的标记。

.content {
    width: 90%; /* or whatever is required */
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; /* hide the cropped portion */
}

img {
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */
}