画像やiframeのサイズ(アスペクト比)を指定できるcssプロパティ、「aspect-ratio」

aspect-rarioプロパティ

レスポンシブデザインにおいて、画像のサイズ（アスペクト比）は、width height属性をきちんと記述しておけば問題ありません。

たとえば、100px × 100pxの画像を表示させるとしたら、

  <img src="example.jpg" width="100" height="100" alt="example">

  <style>
    img{
      width:100%;
      height:auto;
    }
  </style>

としておけば、スクリーンサイズに合わせて画像のwidthが変わっても、1 : 1 の比率に従ってheightも調整されて表示されます。

width heightの記述が無いと、表示速度を遅らせたり、ページ読み込み時にレイアウトのずれが発生する原因となるのできちんと記述することをおすすめします。

先日のGoogleアップデート以降、core web vitalに関する修正カスタマイズ依頼を受けることが増えましたが、私が最初にチェックするのはここです。

このように重要なwidth heightですが今記事の話はそこではなく、実際のアスペクト比とwidth heightの値が異なっている場合に、指定したアスペクト比で画像を表示させる方法です。

INDEX

aspect-ratioプロパティでアスペクト比を指定しobject-fitプロパティではめ込む

たとえばネットショップの商品一覧を思い浮かべていただくと良いかと思うのですが、テンプレートのループ処理で動的に画像を表示させる場合。表示画像が何百あろうとコードに書くwidth height は１つだけです。

<!-- よくある例 -->
{{ for item in list }}
  <img src="{{ item.img }}" width="600" height="600" alt="{{ item.alt }}">

きちんと商品画像のアスペクト比が統一されている（多くは正方形）場合は問題ないのですが、商品ごとに画像サイズがバラバラになっていることもあります。

先ほどの height:auto 指定をしていると、一覧の画像が正方形だったり縦長だったりバラバラになってしまい、見た目に良くないです。

これまではpadding-topプロパティを使って整形していましたが、もっとダイレクトなaspect-ratioプロパティが実装されました。名前の通りアスペクト比を指定できるプロパティです。IE以外のモダンブラウザに対応。

  img{
    aspect-raio: (width) / (height) ;
  }

  /*　(width) (height) には任意の数字が入ります */

たとえば　aspect-raio: 4 / 3 ; のように比率をそのまま書けるのでコードを見ると直感的に理解できます。

一覧画像を正方形に整えたければ、

  .list-image{
    aspect-ratio: 1 / 1;
    object-fit: contain;  /* またはcover */
  }

で解決です。

画像や動画を自動トリミング、object-fit

aspect-ratioの初期値はautoです。要素のwidth height属性や、親要素のサイズにあわせて自動的に比率が設定されます。