HTML CSS ：画像を綺麗に揃えて表示できない。

Question

HTML(Bootstrap使用)、 CSSを使って２枚、４枚、３枚と写真を表示するギャラリーを作成したいのですが、どうしても綺麗に画像が並びません。
どうしても画像の高さだけがずれてしまいます。
まだまだ勉強中なのですが、画像を保存する際にサイズを揃えなければダメなのでしょうか？
それとも何か方法があるのでしょうか？
アドバイスよろしくお願い致します。

<!--メインコンテンツ-->
　　　　　　　<!--画像２枚-->
			<div class="col-8">
				<div class="row">
					<div class="col-6">
						<img src="画像１">
					</div>
					<div class="col-6">
						<img src="画像２">
					</div>
				</div>
               <!--画像4枚-->
				<div class="row">
					<div class="col-3">
						<img src="画像１">
					</div>
					<div class="col-3">
						<img src="画像２">
					</div>
					<div class="col-3">
						<img src="画像３">
					</div>
					<div class="col-3">
						<img src="画像４">
					</div>
				</div>
          <!--画像3枚-->
				<div class="row">
					<div class="col-4">
						<img src="画像１">
					</div>
					<div class="col-4">
						<img src="画像２">
					</div>
					<div class="col-4">
						<img src="画像３">
					</div>
				</div>
			</div>
			
		</div>
		
	</div>

img{
	width: 100%;
	padding-bottom: 5px;
	padding-right: 5px;
}

Comments

[azuapricot]

width: 100%;
ではなくて、300pxなどサイズを指定してみたらどうなりますか？
実際の画像のサイズが同じでない限り、CSSで調整するなどしないと崩れます

[hatena19]

画像の縦横比が一定でないために、高さが揃わないということでしょうか。
もしその場合、高さをそろえるとボックスに収まらない場合がでてきますが、その場合ははみ出る部分は切り取るということでいいのでしょうか。

[mi...]

azuapricotさん
ご回答ありがとうございます。
300pxなどサイズを指定してみてもやはり揃いませんでした⤵︎

Answer 1

画像の縦横比が一定でない、
強制的に高さを揃える、
揃えたことによってはみ出た部分は切り取る、
という仕様にしたいのなら、

img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding-bottom: 5px;
    padding-right: 5px;
}

ただし object-fit はIE11非対応なので、IE11にも対応させたい場合は下記参照。

IE11でもobject-fitを使う一番簡単な方法

Comments

[mi...]

ご回答ありがとうございます。
試してみましたところ若干のズレは出ますがほとんどピッタリ収まりました！
少しずれるのは何か問題があるのでしょうか？

[hatena19]

サンプルを作成して確認しましたがずれるということはないようです。
https://codepen.io/hatena19/pen/ExjNoNy

どのようにずれますか。

Answer 2

画像の高さが違うと、高い方にあわせて変化します。
ので、画像のサイズを合わせるか、CSSで見栄えよくするかだと思います。

以下は、画像を上下中央寄せするパターンです。

  <div class="row d-flex align-items-center">