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

Question

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

Answer 1

你听说过object-fit吗？

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;
}

Learn more about object-fit here:
> css-tricks object-fit
> Mozilla object-fit

注意：现在所有的浏览器都支持object-fit，除了Internet explorer，还在考虑实现。[=14=]

How to crop boostrap image to get width 285 and height 170 of all images?