在引导响应网格中裁剪图像的纵横比

Posted 2023-02-25

【中文标题】在引导响应网格中裁剪图像的纵横比

【英文标题】：Cropping the image to aspect ratio in bootstrap responsive grid

【发布时间】：2012-10-02 17:05:57

【问题描述】：

问题：我正在尝试将图像放置在 Twitter 的 Bootstrap 的 responsive grid system 中，因此它们将被缩放到给定的空间（对于不同的设备，列的响应 CSS 大小会有所不同）。我希望它们适合纵横比——假设它是一个正方形。

Standard CSS cropping technique 如果我希望 Bootstrap 重新调整图像以适应网格设计，则不起作用。负边距仅适用于切割顶部和底部 - 当必须切割图像的高度且宽度保持不变时（例如，将纵向图像放入正方形）。

我发现this technique 用于指定纵横比以削减宽度而保持高度不变（将横向图像放入正方形）与 Bootstrap 的缩放效果很好。

The example (jsfiddle) 大小为 1600x400 和 400x1600 的裁剪图像。到目前为止，我在当前的 Chrome 和 Safari 中检查了它。 编辑：已修复，也可以在 Firefox 中使用。

问题：我怎样才能同时做到这一点：切割宽度和高度。如何对图像进行任意裁剪，选择矩形，以便由 Bootstrap 正确重新缩放？ 在事先不知道图像大小的情况下，如何裁剪到某个宽高比？

感谢您的任何想法！

【参考方案1】：

如果您的解决方案只需要在现代浏览器中运行，并且 img-tag 不是强制性的，那么在响应式设计中使用图像作为背景通常会帮助我。 您可以轻松地将背景放置在中心，并使它们适合其容器。

http://jsfiddle.net/willemvb/wAqSV/2/

【讨论】：

它看起来很棒并且工作正常，但它是为我将裁剪图像居中时设计的。我需要使用的是我可以选择从两侧裁剪多少（例如，人的脸在顶部，我总是需要显示它）。我的想法可以做到这一点，但我不知道如何处理 CSS 中的背景 :( 你的解决方案看起来很棒，我不需要知道图像的纵横比，所以如果我可以使用它会很棒。理想的情况是我可以标记该点并要求它应尽可能靠近中心。但我想这是另一个问题。无论如何，谢谢！

我想我希望很多。从中心移动裁剪的图像并且不知道纵横比？我有点学术，我已经有了我可以使用的东西：）再次感谢您！

:) 您可以使用额外的类并将背景放置在 % 或上/下/左/右来移动图像——但当然要正确设置它是一项手动工作。 jsfiddle.net/willemvb/wAqSV/4