javascript - インライン フレックスボックス モデルの background-image からの幅

Question

cssのみを使用して背景画像から要素の最小幅を計算することは可能ですか?

ビューポートの高さ全体を占めるインライン フレックスボックス ラッパー内で、javascript を使用して、背景画像の (w / h) スケールに基づいて、各子 div の相対的な幅を計算できます。

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 全体をカバーするには:

背景サイズ: カバー;