1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

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%です。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1
Help us understand the problem. What are the problem?