LoginSignup
1

More than 3 years have passed since last update.

画像が読み込まれる前にカクつかないようにする(レスポンシブ対応)

Last updated at Posted at 2020-10-02

imgタグにwidthheightを指定しないと、画像が読み込まれる際にカクつくことがある(Jankって言うらしい)

<div class='wrap'>
  <img src='hoge.jpg'>
</div>

widthとheightを指定して解決?

解決するけど、数値を絶対指定しないといけないのでレスポンシブ対応がむずい。

モダンブラウザの最近のバージョンではwidthとheightの数値からアスペクト比を計算していい感じにしてくれるらしいから、最新のブラウザ以外は一瞬崩れるくらい知らん!って割り切りもありかも。

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver

<div class='wrap'>
  <img src='hoge.jpg' width='320' height='240'>
</div>

擬似要素を使って解決

画像と同じ大きさの透明な擬似要素を設置することで、動的に領域を確保することができます。

<div class='wrap'>
  <img src='hoge.jpg'>
</div>
.wrap {
  position: relative;
}
.wrap:before {
  content: '';
  display: block;
  background: transparent;
  width: 100%;
  padding-top: 75%;  
}
img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

padding-top: 75%の部分は画像の縦横比に合わせて調整。
縦/横 × 100%です。

参考

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
What you can do with signing up
1