【CSS】画像のアスペクト比を維持

どうも、くまだです。

画像のアスペクト比を維持して、画像サイズが変わったとしてもレイアウトを崩すことなく出力させたいときに使えるネタです。（といってもこの手のやつはググればいくらでも出てくるのですが…笑）

pictureタグを使った画像の出しわけはこちらです。

pictureタグで画像をレスポンシブごとに切り替える

pictureタグを使って画像をレスポンシブごとに切り替えることができます。

weblife.ppmp556.com

CSSで画像のアスペクト比を維持

例えばブログ記事一覧ページでよく見かけるレイアウトで、下記画像のようなものがあります。

参考までにコードも下記に。ほぼ脳死で書きました。

  <ul class="card-items">
    <li class="card-items__item">
      <div class="card-items__imgbox">
        <img src="画像のパス" alt="">
      </div>
      <p>文章文章</p>
    </li>
    <li class="card-items__item">
      <div class="card-items__imgbox">
        <img src="画像のパス" alt="">
      </div>
      <p>文章文章</p>
    </li>
    <li class="card-items__item">
      <div class="card-items__imgbox">
        <img src="画像のパス" alt="">
      </div>
      <p>文章文章</p>
    </li>
  </ul>

.card-items {
  display: flex;
  list-style: none;
  justify-content: center;
}

.card-items__item {
  margin-right: 20px;
  width: 100%;
  height: 100%;
  max-width: 400px;
}

.card-items__item:last-child {
  margin-right: 0;
}


.card-items__imgbox img {
  width: 100%;
  height: 100%;
  display: block;
}

画像を見ると一見できているのですが、アイキャッチ画像はどんなサイズのものがくるかわかりません。同じサイズの画像を使っているからちゃんと見えるだけで、もしも違う画像が来てしまったら….以下のようになります。

自分が記事を投稿するなら同じサイズの画像を探して当てはめることができますが、クライアント様はそこまでしてくれません。なので、どんなサイズのものがきてもいいように調整します。

.card-items {
  display: flex;
  list-style: none;
  justify-content: center;
}

.card-items__item {
  margin-right: 20px;
  width: 100%;
  height: 100%;
  max-width: 400px;
}

.card-items__item:last-child {
  margin-right: 0;
}

.card-items__imgbox {
  position: relative;
  width: 100%;
  height: 100%;
}

.card-items__imgbox::before {
  padding-top: calc(466 / 700*100%); /** (画像の高さ / 画像の横幅 *100%) **/
  display: block;
  content: '';
}

.card-items__imgbox img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center;
}

画像サイズがバラバラでもこれで同じサイズに調整することができました。これならどのサイズの画像がきてもだいじょうぶ！（たぶん）

WordPressを使って動的に変わる部分に関しては、こういった調整が必要になります。完全な静的サイトならそこまで考慮しなくてもいいかもしれませんが、制作初期の段階でWordPress化するとわかっているならそのあたりも考慮して作成したほうが良いです。

ここまで読んでくださりありがとうございました。