※ 本記事は広告を利用しています
「お知らせ」や「ブログ」など更新コンテンツでアイキャッチ画像を表示する際、画像サイズがバラバラに見えるのは嫌だ、でも画像をいつも調整するのは面倒だ・・・なんてことはないでしょうか？
今回は、aspect-ratioプロパティを使った改善方法をお伝えします。
cssで改善できるので、幅広い場面で使えて便利です！
目次
aspect-ratioプロパティとは
aspect-ratioプロパティは、アスペクト比を指定できるプロパティです。
アスペクト比とは
アスペクト比は、画像の縦横の長さの比率のことで縦横比とも言います。
基本的に「横:縦」で示され、「3:2」や「4:3」のように表示します。
例えば、「128px × 72px」の画像のアスペクト比は「16:9」と示します。
※この計算は、アスペクト比計算ツールを利用すると便利です。
アスペクト比の重要性
アスペクト比を考慮してコーディングすることは重要なことです。
特にWordpressなどのCMSのように動的に画像を入れ込むような環境では、どんなサイズの画像が入ってもサイズを統一するよう求められることがあります。この場合、縦横比を指定して表示する仕組みをつくることが大切です。
例えば、表示したい画像のサイズを「250px × 167px」のアスペクト比「3:2」で統一したいとします。
そのレイアウトに、サイズが「1000px × 1000px」アスペクト比「1:1」の画像を組み込みます。
何も指定しなければ、250pxのレイアウトに1000pxは大きすぎる、またアスペクト比も異なるので思ったとおりの見た目にならないでしょう。
ですがaspect-ratioプロパティを使いアスペクト比「3:2」を指定すると「1:1」の画像も「3:2」で組み込めるようになるということです。
また、アスペクト比を指定することで、画面幅の変動にも対応できるようになります。レスポンシブ対応でも指定した比率のまま正しいレイアウトで表示することができます。
aspect-ratioの使い方
cssの書き方は「aspect-ratio: 1/1;」のように記入します。
以下では、 1000px × 1000px アスペクト比「1:1」の画像を 250px × 167px アスペクト比「3:2」のサイズに指定したいと思います。
サンプルhtml
<div class="phtbox">
<div class="pht">
<img src="1000x1000.png" alt="">
</div>
</div>
サンプルscss
.phtbox {
width: 250px;
.pht {
aspect-ratio: 3/2;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
※imgタグにはobject-fitプロパティと一緒に width:100%; height:100%; の指定もしてください。
サンプル表示
このように指定することで、画像自体のアスペクト比が「1:1」であっても、「3:2」で表示させることができます。
また、指定する際に「object-fit」プロパティも合わせて使うことが重要になります。
object-fitプロパティ
aspect-ratioプロパティと一緒にimgタグ自体にobject-fitプロパティを使用することは重要です。
object-fitプロパティを使用することで画像をどのように埋め込むかを指定できます。
※上記のサンプルではobject-fit: cover;を使用しました。
object-fit: cover;
ズームインのように、指定サイズに基づいてトリミングされて表示されます。
画像全体を表示したい場合には不向きです。
レイアウトに対して入れ込む画像サイズが大幅に異なるときに向いています。
※250px × 167px 「3:2」に埋込
object-fit: contain;
指定サイズに合わせて画像全体が埋め込まれるように表示されます。
トリミングせずに画像全体を表示させたい時に向いています。
※250px × 167px 「3:2」に埋込
まとめ
WordPressのように後から動的に画像を入れ込む環境では、柔軟な対応が求められます。
様々なサイズパターンに対応できるようなcssを作成しておくことで、ひとつずつサイズ指定する手間も省けますし、画像を登録する人にトリミング技術がなくとも正しい入れ込みがされるようになります。
ぜひaspect-ratioプロパティを活用してみてください。
