【object-fit】バナーで画像の縦横比固定で可変対応する方法

こんにちは。今日は画像にまつわるCSSについて書こうと思います。
バナーとかでたま〜に、片側が画像で、もう片方がテキスト部分というレイアウトを見かけると思います。

↑こんな感じ（秋っぽくサンマの画像にしてみました笑）

この時、画面を縮めた時に画像の縦横比を保ったまま縮める方法を書こうと思います。

↑縮めたとき（画像の両側が見切れていく）

ではさっそくコードをのせますね。

ちなみに、今回ポイントとなるプロパティは【object-fit】です！

コーディング

HTML編

        <div class="bannerWrap">
          <a href="#">
            <div class="wrapInner">
              <figure class="thumb"><img src="assets/images/sanma.jpg" alt=""></figure>
              <div class="txtBlock">
                <div class="blockInner">
                  <div class="tit">タイトルが入ります</div>
                  <div class="more">もっと詳しく</div>
                </div>
              </div>
            </div>
          </a>
        </div>

CSS編

.bannerWrap {
  color: #fff;
  background: #ccc;
}

.bannerWrap a {
  display: block;
  text-decoration: none;
}

.bannerWrap .txtBlock {
  font-weight: bold;
  box-sizing: border-box;
}

.bannerWrap .more {
  text-align: right;
}

@media only screen and (min-width: 769px), print {
  .bannerWrap .wrapInner {
    display: flex;
  }
  .bannerWrap .thumb {
    width: 35%;
    min-height: 230px;
  }
  .bannerWrap .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .bannerWrap .txtBlock {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 30px 50px;
  }
  .bannerWrap .blockInner {
    width: 100%;
  }
  .bannerWrap .tit {
    font-size: 28px;
  }
  .bannerWrap .more {
    margin-top: 50px;
    font-size: 18px;
  }
}

PCとスマホでレイアウトが違うと仮定してメディアクエリ を使っています。

今回のポイントは2点あります！

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

まず1点目は、imgタグに【object-fit: cover;】を指定することで画像の縦横比を保ったまま画像を縮めることができます＾＾

2点目は、画像の高さを固定している点です。（.thumbのmin-heightのところ）

最後に使用上の注意点として、IEが非対応です(^^;
それ以外は問題なさそうです。

簡単な説明になりますが、参考になれば幸いです。
では今日はここまで(^○^)