画像の横並びで高さを合わすのが基本｡しかし､写真を印象的にするには､時に高さを変えることはありでしょう｡

今日は､画像の高さを変えて､そして､HTMLとSCSS､そしてCSSを紹介します｡

完成は以下になります｡

HTML

<div class="box">
<div class="fig">
<figure><img src="images/cloud.JPG" alt="画像"></figure>
<figure class="size"><img src="images/sakura.JPG" alt="画像"></figure>
</div>
</div>

boxで全体を囲みます｡初心者でも分かる､HTMLですね｡

SCSS

.box{
.fig{
display: flex;
align-items: flex-end;
.size img{
height: 200px;
object-fit: cover;
}
}
}

CSS

.box .fig {
  display: flex;
  align-items: flex-end;
}
.box .fig .size img {
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
}

.figに画像があります｡それをflexで横並び｡あとは､.sizeに高さ(heigth)を指定｡

align-itemsで､flex-endにします｡

これでできあがり｡ですが､画像の横幅が気になりますね｡そのときは､こうします｡解説の都合上､クラス名を変えます｡ちなみに､クラス名はルールの範囲で自由です｡完成はこちら｡

<div class="box-2">
<div class="fig-2">
<figure><img src="images/cloud.JPG" alt="画像"></figure>
<figure class="size-2"><img src="images/sakura.JPG" alt="画像"></figure>
</div>
</div>

先ほどとあまり変わりません｡クラス名を変えています｡クラス名は自由です｡CSSのルール内で分かりやすいものを書きましょう｡

SCSS

.box-2{
.fig-2{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: flex-end;
.size-2{
height: 150px;
overflow: hidden;
}
}
}

CSS

.box-2 .fig-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: flex-end;
}
.box-2 .fig-2 .size-2 {
  height: 150px;
  overflow: hidden;
}

ここでは､gridを使ってみました｡フレックスの場合､画像が異常に大きくなったりして調整が難航します｡gridであれば､そこまで気にする必要はないので､少しトリッキーなことをするのであれば､個人的にはgridがいいですね｡お好みで対応してください。

2枚目の写真の高さを指定します｡height: 150pxですね｡あとは､overflow: hiddenで余計なものを排除します｡これで完成です｡

さいごに

今回は少し､トリッキーなことをしてみました｡あまり使いどころはないと思いますが､こういう方法もあるとご理解ください｡

正解は1つじゃないので､自分なりの答えを出してください｡