object-fit を使用して、ピクチャのサイズが親コンテナの幅と高さに一致せず、合理的に表示する必要があるという問題を解決します。

プロジェクトにはさまざまなサイズの画像を表示する必要がありますが、親コンテナのサイズは固定されており、その中で適切に表示される必要があります。このとき、要素のコンテンツが指定されたコンテナの高さと幅にどのように適応するかを指定するために object-fit 属性が必要です。

文法

object-fit: fill|contain|cover|scale-down|none;

1. fill デフォルトでは、元の比率が維持されることは保証されません。コンテンツはコンテンツ コンテナ全体を埋めるように引き伸ばされます。
2. contains は元のサイズ比率を維持します。内容は拡大縮小されます。
3. カバーは元のサイズ比率を維持します。ただし、一部内容がカットされる場合がございます。
4. none は、元の要素のコンテンツの長さと幅を保持します。これは、コンテンツがリセットされないことを意味します。
5. 縮小しても元のサイズ比率が維持されます。コンテンツのサイズは、「なし」または「含む」のいずれかと同じで、どちらかオブジェクト サイズが小さくなります。

html部分

<div class="image-item" >
    <div class="img-wrap">
         <img :src="item.imgUrl" alt="" class="img">
     </div>
</div>

CSS部分

.img-wrap{
        height: 200px;
        width: 100%;
        margin: 0 auto 12px;
        padding: 20px;
        box-shadow: inset 0 0 10px 2px #003e73;

        &:hover {
            box-shadow: inset 0 0 10px 2px #57fac9;
        }
        .img{

            width: 100%;
            height: 100%;
            // object-fit: contain;
            // object-fit: cover;
            // object-fit: fill;
            // object-fit: none;
            object-fit: scale-down;
        }
    }
  
}

結果の表示