アスペクト比を維持しながら、Div を均等に画像で埋めるにはどうすればよいですか?-CSSチュートリアル-php.cn

アスペクト比を維持しながら、Div を均等に画像で埋めるにはどうすればよいですか?

Linda Hamilton

リリース： 2024-11-19 02:55:02

オリジナル

268 人が閲覧しました

How Can I Proportionally Fill a Div with an Image While Maintaining Aspect Ratio?

Div を画像で比例的に埋める

このスレッドでは、ユーザーはアスペクト比を維持しながら div を画像で埋めようとしています画像の向きに関係なく。 div にはオーバーフローが隠されているため、画像のトリミングが可能になります。

この問題に対処するには、画像から幅と高さの属性を削除して、自然なアスペクト比を維持することをお勧めします。その後、Flexbox を使用して div 内の画像を中央に配置できます。

これを実現するための CSS スニペットは次のとおりです:

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

ログイン後にコピー

対応する HTML の例:

<div class="fill">
    <img src="https://picsum.photos/id/237/320/240" alt="" />
</div>

ログイン後にコピー

このソリューションでは、フレックスボックスを利用して画像を中央に配置し、比率を維持しながら画像が div を埋めるようにします。

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