使用CSS如何使圖像保持其寬度與高度的比例並覆蓋其母公司？

我不想使用背景圖片和background-size: cover，因爲我想用picture元素，因此將選擇屏幕右側的圖像。使用CSS如何使圖像保持其寬度與高度的比例並覆蓋其母公司？

我想使寬度和高度兩個確保它至少100％，但保持其比例。

有沒有辦法做到這一點？

2017-01-20 Don Rhummy

你可能尋找對象配合：https://css-tricks.com/almanac/properties/o/object-fit/ –

最小高度和最小寬度爲100％？ –

可以使用min-height和min-width ，設置主題100%並將overflow:hidden添加到父元素。像這樣：

.parent-element-of-picture{ 
    overflow:hidden; 
} 
.picture{ 
    min-height:100%; 
    min-width:100%; 
}

您還可以設置width=100%和min-height:100%，或者反過來。

2017-01-21 00:37:10 theboy

如果不依靠Internet Explorer中，你可以利用object-fit財產。您可以使用此如下：

.picture { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    object-fit: cover; //or contain 
}

爲了支持IE，還有JS polyfills：

2017-01-21 00:04:36

對象的配合不支持IE或邊緣 –

恩是的，這也是我所提到的，這就是爲什麼我把填充工具的鏈接呢？ –

回答