小编Mar*_*ski的帖子

在引导响应网格中将图像裁剪为宽高比

问题:我正在尝试将图像放在Twitter的Bootstrap 的响应网格系统中,因此它们将被缩放到给定的空间中(对于不同的设备,列的响应CSS大小会有所不同).我希望它们适合宽高比 - 让我们假设它是一个正方形.

如果我想通过Bootstrap重新调整图像以适应网格设计,则标准CSS裁剪技术不起作用.负边距仅适用于切割顶部和底部 - 当必须剪切图像的高度时,宽度保持不变(例如,将肖像图像放入正方形).

我发现这种用于指定纵横比以切割宽度保持高度不变(将横向图像放入正方形)的技术与Bootstrap的缩放效果很好.

尺寸为1600x400和400x1600的裁剪图像的示例(jsfiddle).到目前为止,我在当前的Chrome和Safari中进行了检查.编辑:修复也适用于Firefox.

问题:我怎样才能以一种方式做到这两点:切割宽度和高度.如何对图像进行任意裁剪,选择矩形,以便通过Bootstrap正确重新缩放?如果不事先了解图像的大小,如何裁剪到一些宽高比?

谢谢你的任何想法!

css twitter-bootstrap

17
推荐指数
1
解决办法
3万
查看次数

标签 统计

css ×1

twitter-bootstrap ×1