93393


### やりたいこと

  * background-image, max-width が指定された div で、自動的に height を明示する方法を知りたい。 
    * max-width を超える場合は、 max-width まで縮小したい。
  * できれば css だけで実現したい。

### 前提条件

  * 画像のサイズは不定で、小さいこともあれば大きいこともある。
  * div の max-width は 400px を指定。

### 参考コード

  * この例では、横幅 800px の画像は max-width の 400px まで縮小されるため、`height:1000px`に相当する値をセットしたい。

[code]

    <html lang="ja">
    <body>
    <div style="background-image:url(./test.png); background-repeat: no-repeat; background-size: cover; max-width: 400px;"></div>
    </body>
    </html>
    
[/code]

[![検証用の画像_800x2000px](https://i.stack.imgur.com/2lDNJ.png)](https://i.stack.imgur.com/2lDNJ.png)


CC BY-SA 4.0
2023-01-16T07:06:33.687
93379
2023-01-17T01:02:33.450
56414
question
html css
background-image が指定された div で、自動的に height を指定する方法を知りたい


画像の縦横比が一定であれば [`aspect-ratio`
プロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/aspect-
ratio)を指定するだけで可能かと思います。

縦横比が一定ではないなら、CSSだけではできないと思われます。[`Image()`](https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/Image)で対象の画像をロードして
`naturalWidth` `naturalHeight` から計算して `<div>` 要素の `height` プロパティを更新します。


CC BY-SA 4.0
2023-01-17T01:02:33.450
93393
2023-01-17T01:02:33.450
3475
93379
answer