css – 在引导响应网格中裁剪图像到纵横比

问题：我正在尝试将图像放在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/

原文地址：https://www.jb51.cc/css/217200.html