如何裁剪圖像獲取寬度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

回答