问题:我试图将图像放在 responsive grid system 中Twitter 的 Bootstrap，因此它们将按比例缩放到给定空间(对于响应式 CSS，列的大小因设备而异)。我希望它们适合纵横比——让我们假设它是一个正方形。
Standard CSS cropping technique如果我希望通过 Bootstrap 重新缩放图像以适合网格设计，则不起作用。负边距仅适用于切割顶部和底部 - 当必须切割图像的高度而宽度保持不变时(例如将肖像图像放入正方形)。
我发现 this technique用于指定宽高比以切割宽度而保持高度不变(将横向图像放入正方形)与 Bootstrap 的缩放效果很好。
The example (jsfiddle)尺寸为 1600x400 和 400x1600 的裁剪图像。到目前为止，我在当前的 Chrome 和 Safari 中检查过它。 编辑:修复后也可以在 Firefox 中工作。
问题:我怎样才能以一种方式同时做到:削减宽度和高度。如何对图像进行任意裁剪，选择矩形，以便通过 Bootstrap 正确缩放？ 如何在事先不知道图像大小的情况下裁剪成某种纵横比？
感谢您的任何想法!
最佳答案
如果您的解决方案只需要在现代浏览器中工作并且 img-tag 不是强制性的，那么使用图像作为背景在响应式设计中经常帮助我。 您可以轻松地将背景置于中心并使其适合容器。
关于css - 在 bootstrap 响应式网格中将图像裁剪为纵横比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12694919/