img 显示固定部分不压缩不变形

想要图片显示固定部分,超过部分隐藏,不压缩,不变形,这里有两种情况每一种是处理背景图,一种是处理img标签的图片。

背景图

背景图的处理方法又有两种,要区分区别。

.bg-img1 {
            width: 200px;
            height: 200px;
            background: url("images/img1.jpg") center;
            background-size: contain;
        }
        .bg-img2 {
            width: 200px;
            height: 200px;
            background: url("images/img2.jpg") center;
            background-size: cover;
        }

img标签

在标签中插入图片路径的写法,要设置img标签的宽度和高度是一致的,另外需要用到一个关键的css属性——object-fit:cover。

.img-1 {
            width: 200px;
            height: 200px;
            object-fit: cover;
        }

我们之前可能没有用过这个属性,下面来介绍一下属性意思。

“`
  object-fit: fill;
  object-fit: contain;
  object-fit: cover;
  object-fit: none;
  object-fit: scale-down;

“`

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。

contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。

cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见(上面讲解的例子就是如此)。

none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注