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 属性,我们可以很方便地调整和控制图片的大小和适应方式。

相关推荐
爱吃的强哥3 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
谈不譚网安12 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板18 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩19 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真24 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记