Flexbox を使用して画像のアスペクト比を維持するにはどうすればよいですか?

フレックスボックスを使用した画像の縦横比の強制: 縦横比の維持

フレックスボックス レイアウトでは、コンテナの幅を満たすように画像のサイズが変更されることがよくあります。多くの場合、この動作は望ましいものですが、画像の元のアスペクト比を維持したい場合には適さない場合があります。

次の HTML と CSS を考慮してください:

<div class="slider">
    <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="Flexbox を使用して画像のアスペクト比を維持するにはどうすればよいですか?" >
    <img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="Flexbox を使用して画像のアスペクト比を維持するにはどうすればよいですか?" >
    <img  src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="Flexbox を使用して画像のアスペクト比を維持するにはどうすればよいですか?" >
</div>

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

このコードは、コンテナを水平方向に埋めるために伸縮する 3 つの画像を含むスライダーを作成します。

解決策 1: を使用するobject-fit

画像のアスペクト比を維持する 1 つの方法は、CSS の object-fit プロパティを使用することです。 object-fit: contains を設定すると、比率を維持しながら画像のサイズを変更するようにブラウザに指示します。

.slider img {
    object-fit: contain;
}

この解決策はシンプルで、ほとんどの場合にうまく機能します。

解決策 2: フレックス固有のルール

もう 1 つのアプローチは、フレックス固有のルールを使用することです。 align-self: center と flex: 0 0 auto を設定すると、画像が強制的に垂直方向の中央に配置され、コンテナ内で比例してサイズ変更されます。

.slider img {
    align-self: center;
    flex: 0 0 auto;
}

この方法では、画像の位置をより詳細に制御できるため、より適しています。特定のレイアウト要件については。

以上がFlexbox を使用して画像のアスペクト比を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。