やりたいこと
- background-image, max-width が指定された div で、自動的に height を明示する方法を知りたい。
- max-width を超える場合は、 max-width まで縮小したい。
- できれば css だけで実現したい。
前提条件
- 画像のサイズは不定で、小さいこともあれば大きいこともある。
- div の max-width は 400px を指定。
参考コード
- この例では、横幅 800px の画像は max-width の 400px まで縮小されるため、
height:1000px
に相当する値をセットしたい。
<html lang="ja">
<body>
<div style="background-image:url(./test.png); background-repeat: no-repeat; background-size: cover; max-width: 400px;"></div>
</body>
</html>
div
でなくimg
を使うことはできないのでしょうか?img
が使えないという縛りがあっての質問でした。 前提として書いていなくてすみませんでした。