0

是否可以仅使用 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/

4

1 回答 1

0

要缩放背景图像以适合 div 内部:

背景尺寸:包含;

缩放背景图像以覆盖整个 div:

背景尺寸:封面;

于 2015-12-27T05:28:05.190 回答