画像の一部を隠したいときにvwを使うと便利

はじめに

後輩から教えてもらって非常に感動したテクニックのメモです。
人の写真の胸から上、など画像の一部だけ表示したい場合のテクニックです。

ググると出てくるテクニック

少しググると以下のような記事にたどり着きます。
https://stackoverflow.com/questions/11092146/how-to-hide-part-of-the-image

HTML:
<div class="image-container">
  <img src="some-image.jpg" />
</div>

CSS:
.image-container {
  max-height:100px;
  overflow:hidden;
}

画像をdivで包んでしまい、
親要素のハイトをピクセル単位で絞ってしまい、
はみ出した分は非表示とするやり方です。

これでも十分なのですが、イメージのwidthが100%などになっているといった
ディスプレイサイズに画像の大きさが依存する場合、うまく行きません。

結論

heightの値をピクセルでなくvw単位で実装します。

HTML:
<div class="image-container">
  <img src="some-image.jpg" />
</div>

CSS:
.image-container {
  max-height:40vw;
  overflow:hidden;
}

実際の値はデベロッパーツールを使って調整します。
これで、ディスプレイのサイズに寄らず、画像の一部を隠すことができます。