css图片属性,图片自适应

CSS 图片属性指南:background-size 和 object-fit

在前端开发中,使用图片是非常常见的。为了让图片在网页中显示得更好,CSS 提供了多种属性来调整和控制图片的大小和布局。其中,background-size 和 object-fit 是两个常用的属性,它们可以根据需要调整图片的大小和适应方式。

一、background-size 属性:

background-size 属性用于调整背景图片的大小。它可以使用以下几个值:

1.cover:将背景图像等比缩放并完全覆盖容器,可能会出现部分图像被裁剪的情况。

复制代码
.background{
  background:url('../../assets/1.jpg');
  background-size:cover;
}

2.contain:将背景图像等比缩放并尽量完整地显示在容器内

复制代码
.background{
  background:url('../../assets/1.jpg');
  background-size:contain;
}

3.length:指定背景图像的宽度和高度

复制代码
.background{
  background:url('../../assets/1.jpg');
  background-size:200px 200px;
}

4.percentage:指定背景图像的宽度和高度相对于容器的百分比

复制代码
.background{
  background:url('../../assets/1.jpg');
  background-size:50% 70%;
}

二、object-fit 属性

object-fit 属性用于调整标签中的图片的大小和适应方式。它可以使用以下几个值:

1.fill:将图片拉伸以充满元素,可能会导致图片失真。

复制代码
.img{
  width:100px;
  height:100px;
  object-fit:fill;
}

2.contain:将图片等比缩放并尽量完整地显示在元素中。

复制代码
.img{
  width:100px;
  height:100px;
  object-fit:contain;
}

3.cover:将图片等比缩放并完全覆盖元素,可能会出现部分图像被裁剪的情况。

复制代码
.img{
  width:100px;
  height:100px;
  object-fit:cover;
}

4.scale-down:根据图片的原始尺寸和容器的大小决定图片的大小和适应方式。

复制代码
.img{
  width:100px;
  height:100px;
  object-fit:scale-down;
}

如下代码实现的效果可看出,第三章图片更清晰

复制代码
 <div style="width:100px;height:100px">
       <img style="display:inline-block;width:100%;height:100%" src="../../assets/1.jpg" alt="">
    </div>
     <div style="width:100px;height:100px">
       <img style="display:inline-block;width:100%;height:100%" src="../../assets/2.jpg" alt="">
    </div>
    <div style="width:100px;height:100px">
       <img style="object-fit:cover;width:100px;height:100px" src="../../assets/1.jpg" alt="">
    </div>
    </div>

通过使用 background-size 或 object-fit 属性,我们可以很方便地调整和控制图片的大小和适应方式。

相关推荐
gongzemin9 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox21 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952726 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758102 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox