内联弹性盒模型中背景图像的宽度

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：

背景尺寸：封面；