從內聯flexbox模型的背景圖像的寬度

Question

是否可以使用css從其背景圖像中計算元素的最小寬度？

在包含完整視區高度的內聯flexbox包裝中，我們可以使用javascript來計算每個子div的相對寬度 - 基於背景圖像的（w/h）比例。

var scale = ((img.naturalWidth/img.naturalHeight) * 100); 

然後使用CSS3視口高度

element.style.minWidth = scale + 'vh'; 

所以如果一個圖像是130px width x 100px height，施加到div的最小寬度是130vh將此應用於該元素。

可以在沒有javascript的情況下實現基於背景圖像寬度的佈局嗎？

小提琴來證明：https://jsfiddle.net/ucxyefmL/

Answer 1

要縮放背景圖像以適合在div內：

背景尺寸：包含;

要縮放背景圖像以覆蓋整個div：

background-size：cover;