CSS 在引导响应网格中将图像裁剪为纵横比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12694919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cropping the image to aspect ratio in bootstrap responsive grid
提问by Marcin Skórzewski
Problem:I am trying to place images in the responsive grid systemof the Twitter's Bootstrap, so they will be scaled into the given space (for responsive CSS size of the column will differ for different devices). I want them to fit into the aspect ratio -- lets assume it is a square.
问题：我正在尝试将图像放置在Twitter 的 Bootstrap的响应式网格系统中，因此它们将被缩放到给定的空间（对于不同的设备，列的响应式 CSS 大小会有所不同）。我希望它们适合纵横比——让我们假设它是一个正方形。
Standard CSS cropping techniquedo not work if I want the images to be rescaled by Bootstrap to fit the grid design. Negative margins works only for cutting top and bottom part -- when the height of the image has to be cut, and the width is left unchanged (e.g. to put portrait image into the square).
如果我希望 Bootstrap 重新缩放图像以适应网格设计，则标准 CSS 裁剪技术不起作用。负边距仅适用于切割顶部和底部 - 当图像的高度必须被切割而宽度保持不变时（例如将纵向图像放入正方形）。
I have found that this techniquefor specifying aspect ratio to cut the width leaving the height unchanged (putting landscape image into the square) works well with Bootstrap's scaling.
我发现这种用于指定纵横比以减少宽度而保持高度不变（将横向图像放入正方形）的技术与 Bootstrap 的缩放效果很好。
The example (jsfiddle)of the cropped images for size 1600x400 and 400x1600. So far I checked it in current Chrome and Safari. Edit:Fixed to also work in Firefox.
大小为 1600x400 和 400x1600 的裁剪图像的示例 (jsfiddle)。到目前为止，我在当前的 Chrome 和 Safari 中检查过它。编辑：固定也适用于 Firefox。
Question:How can I do it in one way for both: cutting the width and the height. How to do arbitrary crop on an image, choosing the rectangle, to be properly rescaled by Bootstrap? How can I crop to some aspect ratio without the prior knowledge of the size of the image?
问题：我怎样才能以一种方式为两者做到这一点：削减宽度和高度。如何对图像进行任意裁剪，选择矩形，以通过 Bootstrap 正确缩放？在没有图像大小的先验知识的情况下，如何裁剪成某种纵横比？
Thank you for any ideas!
谢谢你的任何想法！
回答by Willem Van Bockstal
If your solution only has to work in modern browsers and the img-tag isn't mandatory, using images as background has helped me out often in responsive designs. You can easily position backgrounds in the center and make them fit their container.
如果您的解决方案只需要在现代浏览器中工作并且 img-tag 不是强制性的，那么使用图像作为背景在响应式设计中经常帮助我。您可以轻松地将背景放置在中心并使它们适合它们的容器。
