imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法

2022/07/21 175 users アスペクト比 バック 手動 height width

レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登... 続きを読む

はてなフォトライフの画像を表示する際に、画面にズレが生じないよう変更しました - はてなブログ開発ブログ

2021/06/09 14 users スレ 領域 はてなフォトライフ はてなブログ 画面

本日、はてなフォトライフの画像をはてなブログに貼り付けた場合に、画像表示時に画面にズレ(レイアウトシフト)が生じないよう変更しました。 この変更により、画面をスクロールした際に、後から画像の読み込みが行われ、閲覧中の領域が下にずれてしまう、という問題を回避することができます。 また、この変更に合わせ... 続きを読む

フロントエンドのデベロッパーは知っておきたい！レスポンシブやレイアウトシフトで大活躍、aspect-ratioプロパティの使い方 | コリス

2021/02/16 24 users aspect-ratioプロパティ コリス レスポンシブ

先月アップデートされたChrome 88でaspect-ratioプロパティがサポートされ、FirefoxとSafariでもまもなくサポートされる予定となっています。 名前の通り、アスペクト比を定義できるCSSのプロパティですが、Webページやスマホアプリで実際にどのように使用すると便利なのか、その使い方を紹介します。 New aspect-ratio ... 続きを読む