问题: 我正在尝试将图片放置在Twitter Bootstrap的响应式网格系统中,以便它们会按照给定的空间进行缩放(对于响应式CSS大小,列的大小会因不同设备而异)。我希望它们能适合长宽比 - 让我们假设它是正方形。
标准CSS裁剪技术如果我希望图像由Bootstrap重新缩放以适应网格设计,则无法使用。负边距仅适用于切割顶部和底部部分 - 当必须切割图像的高度时,并且宽度保持不变(例如将肖像图像放入正方形中)。
我发现这个技巧可以指定长宽比,剪切宽度并保持高度不变(将横向图像放入正方形中),与Bootstrap的缩放配合效果很好。
这个例子(jsfiddle)显示了大小为1600x400和400x1600的裁剪图像。到目前为止,我已经在当前版本的Chrome和Safari中进行了检查。编辑:修复了Firefox中也可以工作的问题。
问题: 我如何使用一种方法来同时剪切宽度和高度?如何对图像进行任意裁剪,选择矩形区域以便被Bootstrap正确缩放?
感谢您的任何想法!