如何裁剪图像获取宽度285和所有图像的高度170？

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

2015-05-01 leec leec

嗨！你的头衔说你想要一个固定的大小，但在你的问题中，你说你想要响应大小，它是哪一个？你想把图像裁剪成特定比例吗？请澄清。 –

@Josef Engelfrost我希望它能够响应并且尺寸相同。 –

所以，如果你得到这个权利，你有不同大小和不同比例的图像，但你希望图像具有相同的比例（裁剪掉溢出），并且你希望它们缩放到容器的宽度（“响应” ）？ –

你有没有听说过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

注：所有的浏览器都支持对象配合时下，除了IE浏览器，谁仍在考虑实现它。

2015-05-02 04:11:00

回答