62165


CSS を使って img タグで表示される画像のサイズを以下のように指定したいです。

  * 長辺の長さは 128 ピクセル、かつ、
  * 縦横の長さの比は維持。

たとえば具体的には以下のように表示したいです。

  * 256×256 → 128×128
  * 256×128 → 128x64
  * 128×64 → 128×64
  * 64×128 → 64×128
  * 64×64 → 128×128
  * 32×64 → 64×128

`max-width` や `max-height` を使うと大体は解決できるのですが、画像が 128×128
より小さいときに小さいまま表示されてしまいます。画像が小さい場合は拡大したいです。

[code]

    img.resize {
      max-height: 128px;
      max-width: 128px;
    }
    
[/code]

どのように HTML と CSS を書けば良いでしょうか？


CC BY-SA 4.0
2020-01-11T11:27:31.450
62159
2020-01-11T21:43:37.593
19110
question
html css
imgタグで、アスペクト比を保ちつつ長辺の長さを指定したい


`object-fit` プロパティを使うことで実現出来ます。`object-fit` プロパティは **横幅と高さによって確立されたボックス**
へ画像をどのように収めるのかを指定する[[1]](https://drafts.csswg.org/css-images-3/#the-object-
fit)ため、 `max-width`, `max-height` プロパティを `width`, `height`
プロパティへ変更しておく必要があります。

> ### § 4.5. Sizing Objects: the object-fit
> property[[1]](https://drafts.csswg.org/css-images-3/#the-object-fit)
>
> The object-fit property specifies how the contents of a replaced element
> should be fitted to the box **established by its used height and width**.
[code]

    img.resize {
      height: 128px;
      width: 128px;
      object-fit: contain;
    }
    
[/code]

[code]

    ul {
      list-style: none;
    }
    
    img.resize {
      height: 128px;
      width: 128px;
      object-fit: contain;
      border: solid black;
    }
    
    
    /*
    256×256 → 128×128
    256×128 → 128x64
    128×64 → 128×64
    64×128 → 64×128
    64×64 → 128×128
    32×64 → 64×128
    */
[/code]

[code]

    <ul>
      <li>
        <img src="http://placehold.jp/256x256.png" class="resize">
      </li>
      <li>
        <img src="http://placehold.jp/256x128.png" class="resize">
      </li>
      <li>
        <img src="http://placehold.jp/128x64.png" class="resize">
      </li>
      <li>
        <img src="http://placehold.jp/64x128.png" class="resize">
      </li>
      <li>
        <img src="http://placehold.jp/64x64.png" class="resize">
      </li>
      <li>
        <img src="http://placehold.jp/32x64.png" class="resize">
      </li>
    </ul>
[/code]

* * *

`object-fit` プロパティへ `contain`
を指定した場合、画像のサイズによっては余白が生じます。もし、この余白なしで横幅や高さが画像のサイズと一致して欲しい場合には、 JavaScript
を使う必要があると思います。

[code]

    function containedSize(img) {
      const r = img.naturalWidth / img.naturalHeight;
      let containedWidth = img.height * r;
      let containedHeight = img.width / r;
    
      if (containedWidth > img.width) {
        containedWidth = img.width;
      }
      if (containedHeight > img.height) {
        containedHeight = img.height;
      }
    
      return [`${containedWidth}px`, `${containedHeight}px`];
    }
    
    document.querySelectorAll(".resize").forEach(e =>
      e.addEventListener("load", () => [e.style.width, e.style.height] = containedSize(e))
    );
[/code]

[code]

    ul {
      list-style: none;
    }
    
    img.resize {
      height: 128px;
      width: 128px;
      border: solid black;
    }
    
    
    /*
    256×256 → 128×128
    256×128 → 128x64
    128×64 → 128×64
    64×128 → 64×128
    64×64 → 128×128
    32×64 → 64×128
    */
[/code]

[code]

    <ul>
      <li>
        <img src="http://placehold.jp/256x256.png" class="resize">
      </li>
      <li>
        <img src="http://placehold.jp/256x128.png" class="resize">
      </li>
      <li>
        <img src="http://placehold.jp/128x64.png" class="resize">
      </li>
      <li>
        <img src="http://placehold.jp/64x128.png" class="resize">
      </li>
      <li>
        <img src="http://placehold.jp/64x64.png" class="resize">
      </li>
      <li>
        <img src="http://placehold.jp/32x64.png" class="resize">
      </li>
    </ul>
[/code]


CC BY-SA 4.0
2020-01-11T13:25:09.603
62165
2020-01-11T21:43:37.593
2020-06-17T08:14:45.997
-1
32986
62159
answer