LoginSignup
2
1

More than 3 years have passed since last update.

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

Posted at

はじめに

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

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

少しググると以下のような記事にたどり着きます。
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;
}

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1