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

フレックスボックスでの画像の縦横比の維持

高さのサイズを変更するときに画像の縦横比を維持することは、CSS フレックスボックス モデルでは課題となる場合があります。ただし、これを実現するにはいくつかの方法があります。

Object-Fit プロパティ

1 つの方法は、画像で object-fit プロパティを使用することです。 object-fit: contains を設定すると、イメージはアスペクト比を維持しながらターゲット コンテナ内に収まるようにスケーリングされます。

フレックス固有のルール

別のオプションは次のとおりです。フレックス固有のルールを使用するには:

• 親内の画像を垂直方向の中央に配置するには、align-self: center を設定します。コンテナ。
• flex: 0 0 auto を設定すると、画像の幅と高さが柔軟になり、必要に応じて縮小または拡大できるようになります。

例

両方を示す例を次に示します。メソッド:

<div class="slider">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
</div>

.slider {
    display: flex;
    height: 200px;
}

.slider img {
    margin: 0 5px;
    object-fit: contain;
}

/* Alternative Flex-Specific Rules */
.slider img {
    align-self: center;
    flex: 0 0 auto;
}

このメソッドは、高さを調整する場合でも、画像のアスペクト比を効果的に保持します。

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