[コーディング]画像のアスペクト比（縦横比）を固定する方法

はじめに
HTML
CSS
説明
応用

はじめに

レスポンシブ調整時に、画像のアスペクト比が崩れる！ってことありませんか？

そんな時に使えるコーディング方をお伝えします！

HTML

<figure class="img-wrap">
  <img src="sample.jpg" alt="サンプル画像">
</figure>

CSS

figure.img-wrap {
  position: relative;
}
figure.img-wrap:before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 75%; /* （デザイン上の画像の）高さ / 幅 * 100（単位：％） */
}
figure.img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

説明

figure.img-wrap:beforeのpadding-topで、高さを幅の75%に設定することができます。

このpadding-topでできたスペースに、imgタグを入れるために、imgにはposition: absolite;を使用しています。

ちなみにpadding-topは、calc()関数を使用して計算することもできます。

padding-top: calc( 300 / 400 * 100%);

CSSのcalc() 関数は、 CSS のプロパティ値を指定する際に計算を行うことができるものです。
https://developer.mozilla.org/ja/docs/Web/CSS/calc()

応用

結構設定するCSSプロパティが多いので、SCSSで制作している時はmixinで設定して呼び出せるようにしています。

@mixin img {
  position: relative;
  &:before {
    content: '';
    display: block;
    width: 100%;
  }
  img,picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

figure.img-wrap {
   @include img;
   &:before {
      padding-top: 75%; // ここで画像によって比率を変えるだけにする
   }
}

是非お試しください！