こんにちは。Webページ上に画像を表示させるにはimgタグを使いますよね。しかし、使ってみると結構サイズが思った通りになってくれずに困ったことも多いのではないでしょうか。
というわけで今回はimgタグのサイズの決まり方について細かくまとめてみました。
imgタグの基本的な使い方については次の記事をご覧ください。
結論
例えば画像を、
- 画像は親要素の横幅と同じにしたい
- 4：3の比率を維持させたい
場合は以下のような指定を行うと必ず思った通りのサイズになります。
<img
class="Image"
width="400"
height="300"
loading="lazy"
decoding="async"
src="任意の画像へのパス"
alt="適切な代替テキスト"
/>※loading=”lazy”は必要に応じて指定してください。参考：https://itokoba.com/archives/7114
.Image {
aspect-ratio: 4 / 3;
width: 100%; /* 画像のサイズを親要素の横幅に合わせたい場合。 */
height: auto; /* 画像のサイズを親要素の高さに合わせたいならwidth: auto; height: 100%; にする。 */
object-fit: cover; /* もし表示させたい比率と画像の比率が異なると画像が歪むので、object-fitによって制御する。 */
}デモは以下です。横幅を変えても比率が維持されています。
少し説明すると、
- imgタグにwidth, height属性を指定する。
- 最終的な画像のサイズには関わらないが、ユーザビリティ向上のために必要。参考：https://itokoba.com/archives/7047
- CSSからwidth, heightをなんらかの値（autoを含む）に指定した上でaspect-ratioを指定する。
- どんな比率の画像でも歪まないように、object-fitで調整する。場合によってはobject-positionも併記する。
という3点を行なっています。
imgタグにwidth, height属性が指定されていたとしても、CSSのwidth, heightプロパティの値が優先されることがポイントですので意識しておきましょう。
解説
前提として、画像は1500×1125（比率4：3）の画像を使って説明します。
パターンはかなり多いのですが、可変する場所は以下の3つです。
- imgタグのwidth, height属性
- CSSのwidth, heightプロパティ
- CSSのaspect-ratioプロパティ（参考：https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio）
ただしaspect-ratioが絡むと複雑になるので一旦考えず、後半のセクションで別途解説します。
何も指定しない場合
imgタグのwidth, height属性もCSSも指定しない場合は画像の元々のサイズで表示されます。よって1500px × 1125pxになります。
この例では画面の横幅は1024pxですが、画像の元の横幅が1500pxのため親要素をはみ出します。基本的にはみ出すと困るので、少なくともCSSでwidthは指定をすべきでしょう。
width, height属性のみ指定した場合
指定した値のサイズで固定になります。
指定例：
<img
width="400"
height="300"
src="./image.webp"
alt=""
/>こうすると横幅400px、高さ300pxに固定されます（下画像）。固定になるのでサイズによっては親要素をはみ出します、注意しましょう。
必ずしも元画像の比率である必要はなく、表示させたい比率にすれば良いです。ただしそれだけでは画像が歪むのでobject-fitプロパティも合わせて指定することになるでしょう。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/object-fit
CSSでwidth, heightプロパティのみを指定した場合
この場合はCSSで指定した通りの値になります。ただし両方に値を指定するか、片方はautoのままかによって挙動が変わります。
両方に値を指定した場合
固定pxでも%指定でも何でも構いません。
指定例：
<img class="Image" src="./image.webp" alt="" />.Image {
width: 500px;
height: 500px;
}こうすると次のような状態になります。
この場合は画像の元々の比率と異なり、縦に伸びています。実用上はobject-fitも併記しましょう。
片方がautoの場合
片方がauto、つまりwidthかheightのどちらかのみに値を指定した場合は元の画像の比率を維持したサイズになります。
指定例：
<img class="Image" src="./image.webp" alt="" />.Image {
width: 500px;
}こうすると、横幅が500pxになる上で元々の画像の比率である4：3を維持します。この時高さは375pxになります（下画像）。
高さのみ指定してもOKです。例えばheightを500px、widthをautoにすると横幅は666.66pxになります。
ここまでのまとめ
- 何も指定しなければ画像の元のサイズで表示される
- width, height属性を指定するとそのサイズで表示される
- CSSでwidth, heightプロパティを指定してもそのサイズで表示される
- ただしwidth, heightプロパティの片方が値でもう片方がautoの場合、元々の画像の比率を維持しながらCSSで指定したサイズになる
というようにサイズが決まります。また、width, height属性とCSSのwidth, heightプロパティの両方が指定されている場合はCSSのものが優先されます。
aspect-ratioが絡む場合
aspect-ratioは推奨アスペクト比を決定するものです。推奨アスペクト比はざっくり言うと、
「要素の縦横比が明示されていない、もしくは初期値に当たる縦横比がない場合に利用される縦横比」というものです。imgタグに関して言うと、「CSSのwidth, heightプロパティの片方が値でもう片方がautoの場合」にのみaspect-ratioが効きます。
逆に、
- CSSからも属性からもwidth, heightを指定しない場合
- width, height属性を指定した場合
- CSSからwidth, heightをどちらも値で指定した場合
はいずれもaspect-ratioが効かないので注意してください。
aspect-ratioの具体的な使用場面としては記事一覧のサムネイルなどで、システム側から画像が投稿される時にサイズがバラバラにならないようaspect-ratioで比率を固定させたい場合です（下画像）。
aspect-ratioについて詳しく知りたい方はこちらをご覧ください。
おすすめのimgタグのデフォルト設定
さて、サイズ設定に関してはここまで解説した通り、特に最初の結論セクションにある通りの書き方をすれば良いです。
プラスで僕が普段指定しているデフォルトのCSSを紹介します。デフォルトでheight: auto; にしているのでaspect-ratioを併用したい時に毎回書かなくてよかったり、display: block; にしていて扱いやすいなど毎回の指定がちょっとだけ楽になります。
img {
display: block;
width: 100%;
height: auto;
}CSSの最初に書くか、default.cssなどのファイルを作って読み込む形でも良いです。
max-width: 100%; にしているケースが紹介されることも多いですが、親要素をはみ出して使いたいケースがそこそこあるので僕は採用していません。どういう場合かは次の記事で解説しています。
まとめ
というわけでimgタグのサイズについてでした。サイズを指定できる場所が多いので混乱しやすいのですが、とにかくCSSで指定すれば間違いないので意識しておきましょう。
他にもCSSにおける細かいテクニックはたくさんあります。それらを学んでぜひクオリティの高いコーダーになりましょう。僕がフリーランス7年間で培ったテクニックを本にまとめていますのでぜひお買い求めください。
コメント