配置したイメージ「img src=〜」を枠いっぱいに表示する「background-size:cover;」のように表示させる方法

<img src=”〜で始まる配置したイメージ画像を、その親タグの高さ、幅それぞれいっぱいに表示させたい。
しかも画像の比率は崩さずに親タグの範囲を超える部分は見えないようにして。

そんな時に使えるCSSの書き方を紹介します。
WordPressで簡単に画像の更新などができるようにカスタマイズするときなどにも重宝します。

<div class="oya_area">
  <img src="kari.jpg" alt="kari">
</div>
.oya_area {
  position: relative;
  width: 30%;
  height: 300px;
  /* 幅(width)と高さ(height)は任意のサイズで */
  overflow: hidden;
}
.oya_area img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);]
  -ms-transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-width: inherit;
}

imgに対して『object-fit』というのもあるようですが、IEには対応していないようです。

.oya_area img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

IE対応のためのJavascriptファイルが公開されているようです。
しかし、そのうち対応してくると思いますので、ここでは説明しません。
気になる方は「object-fit ie」で検索すると出てきますので、そちらで確認してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です