欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css让不同大小的图片适应div的大小,且不变形。

程序员文章站 2022-07-24 17:54:31
做成背景图片 单个 .imgdiv { width: 100px; // 你要的正方形 height: 100px; // 你要的正方形 background-image: url(/your/image/path.jpg); background-position: center center; ......

做成背景图片

单个

.imgdiv {
    width: 100px;     // 你要的正方形
    height: 100px;    // 你要的正方形
    background-image: url(/your/image/path.jpg);
    background-position: center center;    // 居中
    background-size: cover;                // 填满div
    background-repeat: no-repeat;
}

多个循环时:
<div class="img"   :style="{background: `url(${item.goodsMainImage})50% 50% / cover no-repeat`}">
</div>