如何使用CSS將矩形圖像裁剪爲正方形？

我有一個矩形圖像，我想把它裁成方形。這是這樣的：如何使用CSS將矩形圖像裁剪爲正方形？

img { 
    width: 200px; 
    height: 200px; 
}

它很好，但只有當我知道最終的寬度和高度。但是當我不知道身高值時，我應該做什麼，只有寬度而不是px，但是以％爲單位？

img { 
    width: 25%; 
}

我只有寬度（25％），我需要方形圖像。我該怎麼辦？

我需要在CSS中的解決方案。我不能使用JS。

來源

2014-08-28 ZaquPL

可能重複：http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout – webNeat 2014-08-28 15:15:44

可能重複Ø f [CSS顯示圖像大小和裁剪]（http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped） – MikeSmithDev 2014-08-28 15:19:37

如果它並不需要是一個img然後我會創造一個div，使圖像的background-image，迫使僞元素，使相對div寬度的高度，然後使背景圖像cover的div與background-size：

http://jsfiddle.net/8tqxvvzs/

div 
{ 
    position: relative; 
    display: block; 
    background-image: url('http://placehold.it/350x150'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center; 
    width: 25%; 
} 

div:before 
{ 
    content: ""; 
    display: block; 
    padding-top: 100%; 
}

來源

2014-08-28 15:17:32 Luke

如何使用CSS將矩形圖像裁剪爲正方形？

回答

相關問題