如何裁剪引导图像以获得所有图像的宽度 285 和高度 170？

Posted 2023-02-25

【中文标题】如何裁剪引导图像以获得所有图像的宽度 285 和高度 170？

【英文标题】：How to crop boostrap image to get width 285 and height 170 of all images?

【发布时间】：2015-05-01 07:44:24

【问题描述】：

我有不同大小的图像，我希望它具有相同的宽度和高度，并使其仍然响应。那么如何做到这一点呢？

【问题讨论】：

嗨！您的标题说您想要一个固定大小，但在您的问题中您说您想要响应大小，它是哪一个？您想将图像裁剪为特定比例吗？请澄清。

@Josef Engelfrost 我希望它响应迅速并且尺寸相同。

所以如果你做对了，你会有不同尺寸和不同比例的图像，但你希望图像具有相同的比例（裁剪掉溢出），并且你希望它们缩放到宽度容器（“响应式”）？

Crop an image to square using percentages and max widths的可能重复

我只希望所有图像在调整屏幕大小时都具有相同的高度和响应性。

【参考方案1】：

你听说过object-fit吗？

object-fit 属性定义元素如何响应其内容框的高度和宽度。它适用于与 object-position 属性结合使用的图像、视频和其他可嵌入媒体格式。单独使用 object-fit 时，我们可以通过对内嵌图像在盒子内的挤压和拉伸方式进行细粒度控制来裁剪内嵌图像。

以下是 object-fit 对图像的作用以及如何使用它的示例：http://jsfiddle.net/8ba7zjhs/

html

<img class="niceImage" src="http://assets1.ignimgs.com/2013/09/17/trevorjpg-883566_1280w.jpg">

CSS

.niceImage 
    width: 385px;
    height: 140px;
    object-fit: cover;
    object-position: center;

在此处了解有关对象拟合的更多信息：> css-tricks object-fit> Mozilla object-fit

注意：现在所有的浏览器都支持对象匹配，除了 Internet Explorer，它还在考虑实现它。