🐶

画像のサイズを適切に調整したい！サイズが大きくなるのはなぜ？

2021/08/28に公開

ポートフォリオに綺麗に画像を配置させたい！

画像だけが大きくて収まらなかったり、想像していたサイズよりなんか大きかったり、width: 100%;で半分の大きさになってしまったり。

想像通りのようにうまく機能しなくて、悪戦苦闘汗

「なんでだろう？」ってコードをいじっていると気づけば1時間経っていたり涙

画像の縦横比を変えずに拡大縮小をしていきたい！というのが今回のテーマです。

デフォルトでは縦横比は維持されるので、たいていの場合はあまり何も気にしなくても縦横比を維持したまま拡大・縮小が可能ですが、HTMLやCSSの書き方によっては縦横比が維持されない場合もあります

画像のサイズが大きくなる理由

画像本来のサイズを「アスペクト比」と言います。

これは画像自体の本来の大きさになります。

スマホで写真を撮影したり、パソコンでスクショしたりタブレットでSnow撮影したり。

その都度、変動する値になります。

特にしてなければ、この幅に指定されるためそのまま配置すると大きさによって凹凸が生じます。

ブログとかで、そのままの大きさでありたいと言った趣向でない限り、統一した方が利用される方がみやすいと思います。

確実にサイズが調整できます。

width(横幅)の部分とheight(縦幅)の部分をそれぞれ、数値や%の単位で表してあげるとそれに合わせて拡大縮小されます。

ただ、画像ひとつずつに指定することになるため3つ以上画像があると、いざ画像の幅を統一させるために変えたいとかであれば手間がかなりかかります。

少しだけHTMLの知識が必要になりますが、要素(div)で囲うことで細かい部分までサイズを指定できます。

// HTML
<div class="div-img">
<img src="画像のリンク" alt="">
</div>

// css
.div-img {
width: 100%;//全体の100%
width: 50%;//全体の50%
width: 30%;//全体の30%
}
.div-img img {
width: 100%;//ここは変えない。
height: auto;//ここは変えない。
}

画像自体の幅は100%固定です。

要素になるdiv要素はサイト全体幅から100%を示します。

これが50%だと、画像の大きさは縮小され、左半分に設置されます。

このように、画像自体を100%に要素を整えたい幅に指定すると、イメージしたい幅に調整できます。

また、上級テクニックとして、要素で段階ごとに幅調整すると画像のような仕上がりにすることができます。

画像本来の縦横比率を「アスペクト比」と呼びます。

画像を表示した時、画像によって大きさが変わるのは「アスペクト比」によるモノです。

設置される時は、画像や要素として扱ってサイズ調整をしてあげましょう。