画像のサイズ（比率）を変更する際imgタグに直接サイズを指定すれば変更されますが、今回は画像にmargin-left:autoやmargin-right:autoを指定した際の画像のサイズ変更方法をご紹介します。
まずはimgタグのサイズを変更してみる
画像はこちらの可愛いネコチャンの素材を使用します。
使用するhtmlはこちら。
<img src="https://drive.google.com/uc?export=view&id=1tNUeCBZ-diixCddWHMIjrWFEvSu3N1mC" alt="猫2匹">この画像のサイズを変えるにはimgタグに直接サイズを変更すれば変更されます。
img {
width: 500px;
height: 200px;
object-fit: cover;
}See the Pen まずはimgタグのサイズを変更してみる by natsuki (@web_natsuki) on CodePen.
元の画像からのサイズ（比率）変更がわかりやすいように横長にトリミングしてみました。元の画像と指定したサイズの比率が違う場合は、object-fit: cover;を忘れずに！これを使えば比率が違ってもいい感じにトリミングしてくれます。
サイズを変えるだけならこのやり方で簡単にできますね！
画像にmargin-left:auto; margin-right:auto;を使う
次は画像にmargin-left:auto;とmargin-right:auto;を使う場合のやり方です。
先ほどのimgタグにmargin-left:auto; margin-right:auto;を指定しても効きません。なのでimgをdivで囲んで、そのdivに当てましょう。
<div class="mv">
<img src="https://drive.google.com/uc?export=view&id=1tNUeCBZ-diixCddWHMIjrWFEvSu3N1mC" alt="猫2匹">
</div>imgを囲うdivにはmvというクラスをつけました。このmvにmargin-left:auto;を当てて画像を右寄せにします。
.mv {
margin-left:auto;
width: 500px;
}
img {
width: 100%;
}See the Pen 画像にmargin-left:auto; margin-right:auto;を使う場合 by natsuki (@web_natsuki) on CodePen.
このやり方で画像が右寄せできました！
img をdivで囲んで、divにmargin-left:auto; margin-right:auto;を当てている場合は、imgではなくdivにwidthを指定します。imgには”画像いっぱいいっぱいに”という意味で、width:100%;を当てるのを忘れないようにしましょう。
margin-left:auto; margin-right:auto;を使ったまま、画像の比率変更
さて、画像を右寄せにできたのはいいですが、このままだと画像の比率をかえることができていません。mvにheightを指定しても、元の画像の形を維持しているので変わりません。
その場合はimgにheightをあてると解決します！
.mv {
margin-left:auto;
width: 500px;
}
img {
width: 100%;
height: 200px;
object-fit: cover;
}See the Pen Untitled by natsuki (@web_natsuki) on CodePen.
先ほどのcssのimgに、height: 200px;とobject-fit: cover;を追加しました。
これで画像右寄せしたまま、画像のサイズ（比率）変更もできました！object-fit: cover;を使用しているので、画像がくずれることもなくいい感じにトリミングされています。
以上です！
imgを囲うdivにサイズを指定して元のサイズの比率を維持したまま画像を使うことはよくあったのですが、margin-left:auto; margin-right:auto;を使用して、さらにobject-fit: cover;を使ったトリミングをすることがあまりなかったので、最初はちょっとつまずきましたが、やってみるととても簡単でした。
誰かの参考になると嬉しいです。読んでいただきありがとうございました！