问题:我正在尝试将图像放在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正确重新定标?
如果没有图像尺寸的先前知识,可以如何裁剪某些宽高比?
谢谢任何想法!