DEMOデモページ

[DEMO]WordPressで画像のサイズをCSSで最適化してレスポンシブデザインに対応する

パソコンでブラウザ幅を大きくしたり小さくしたりして動作を確認してください。

imgタグで出力する画像を最適化する

何も指定してない場合

高さ固定

img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

縦横比を維持

img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}

backgroundで出力する画像を最適化する

高さ固定

.bk-img {
  width: 100%;
  height: 150px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

縦横比を維持

.bk-img {
  width: 100%;
  height: min(15vw, 150px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

CONTACTお問い合わせ

様々な制作経験から得たノウハウを活かし、ご予算・ご要望に合わせたお客様のビジネスのお手伝いができるかと思います。
福岡を中心に事業を行っておりますが、ZOOMやChatwork、LINE等のツールを利用して遠距離のお客様との打ち合わせも行っております。
WEB関連でお困りの際はお気軽にご相談ください。