问题：我正在尝试将图片放在Twitter的Bootstrap的responsive grid system中，因此它们将缩放到给定的空间中（因为列的响应CSS大小会有所不同）不同的设备）。我希望它们适合宽高比 - 让我们假设它是一个正方形。
如果我希望Bootstrap重新调整图像以适应网格设计，那么Standard CSS cropping technique不起作用。负边距仅适用于切割顶部和底部 - 当必须剪切图像的高度时，宽度保持不变（例如将肖像图像放入正方形）。
我发现this technique用于指定纵横比以切割宽度，保持高度不变（将横向图像放入正方形）与Bootstrap的缩放效果很好。
The example (jsfiddle)裁剪后的图片尺寸为1600x400和400x1600。到目前为止，我在当前的Chrome和Safari中进行了检查。 修改：已修复也适用于Firefox。
问题：我怎样才能以一种方式做到这两点：切割宽度和高度。如何对图像进行任意裁剪，选择矩形，以便通过Bootstrap正确重新缩放？ 如果不事先了解图像的大小，如何裁剪到一些宽高比？
感谢您的任何想法！
答案 0 :(得分：24)
如果您的解决方案只需要在现代浏览器中工作并且img-tag不是必需的，那么使用图像作为背景通常会在响应式设计中帮助我。 您可以轻松地将背景放在中央，使它们适合容器。