0

やりたいこと

  • 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>

検証用の画像_800x2000px

2
  • divでなくimgを使うことはできないのでしょうか?
    – sayuri
    Commented 2023年1月17日 1:44
  • ありがとうございます。 imgが使えないという縛りがあっての質問でした。 前提として書いていなくてすみませんでした。
    – vips
    Commented 2023年1月17日 2:19

1 件の回答 1

0

画像の縦横比が一定であれば aspect-ratio プロパティを指定するだけで可能かと思います。

縦横比が一定ではないなら、CSSだけではできないと思われます。Image()で対象の画像をロードして naturalWidth naturalHeight から計算して <div> 要素の height プロパティを更新します。

1
  • aspect-ratio というプロパティを知らなかったので、大変勉強になりました。 ただ、今回は縦横比が一定ではありませんので、jsで実装する方向にしようと思います。 ありがとうございました!
    – vips
    Commented 2023年1月17日 2:17

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。