明けましておめでとうございます。
新年早々のブログです。

今年私の住んでいる地域では積雪73センチとものすごい量の雪が降り、年末も年始も雪かきで
身体がバキバキです。久々に普段あまり使用しない筋肉を使ったこともあり、体が疲れ果てて寝正月になってました。笑

前置きはこれくらいにしておいて…
知識はあったけど使用してなかったのが「aspect-ratio」。
全ブラウザに対応していることを社内の人からの報告で知り、積極的に使っていこうと思ってます。
2021年のはじめごろはまだ対応しているブラウザは少なかったので、見送っていたのですが2021年の10月ごろには
すでにすべてのブラウザで対応済みだったようです。

ということで、今後バンバン使っていくにあたって一度ブログでまとめておくことにします。

その名の通り「aspect-ratio」プロパティを使用することで、
レスポンシブ対応の画像をアスペクト比を維持したまま実装が可能です。

ではどうやって使っていくかと言いますと…

.images {
  width: 100%;
  aspect-ratio: 4 / 3;
}

と、まあこんな感じです。

私はこれまで『Padding Hack』というやり方でこの比率を維持する方法をとってました。
下記がそのやり方。

figure {
  position: relative;
  width: 100%;
  padding-top: 65%;
  img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0; 
    right: 0;
    width: 100%;
    height: 100%;
  }
}

あとは場合によってはbeforeなどの相対的要素を使用して実装したりしてましたね。
ただこれだとソースは長くなるし、あんまりいろんなところで実装したくない方法です。

これが先ほどの2行程度で収まるので万々歳です。
みなさんもぜひこれを機に使ってみてくださいね！

• blog,
• code,
• css3