画像の高さが揃わない問題｡これを解決する方法です｡

HTML

<div class="g-box">
<img src="images/cloud.JPG" alt="画像">
<img src="images/mv/pc-main.jpg" alt="画像">
</div>

SCSS

.g-box{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
img{
height: 300px;
object-fit: cover;
}
}

スマホでは1カラムですが､画面サイズが768pxを超えると高さが合う写真が横に並びます｡この2枚はサイズが異なります｡何もしなければ､下の画像のように高さが異なります｡解説の都合上､別のクラス名を付けています｡

<div class="g-box-2">
<img src="images/cloud.JPG" alt="画像">
<img src="images/mv/pc-main.jpg" alt="画像">
</div>

上の画像にならないように､imgにたいして､高さ(height)とobject-fit: coverを書きます｡

高さが異なっても

同サイズなら､とくに問題ありませんが､写真が複数で高さも異なる場合､いちいち､アプリでトリミングは現実的ではないですね｡

SCSSやCSSでやれば解決｡一瞬でできます｡

CSSは以下になります｡

.g-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.g-box img {
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
}

.g-box-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

さいごに

他にも方法はありますが､もっとも単純かと思います｡特に問題ありません｡数枚ならアプリでトリミングしていいですが､100枚､200枚となると､シンドイでしょう｡そのときは､SCSSやCSSでトリミングすると完璧です｡

あくまで一例としてご理解ください｡