用户登录
用户注册

分享至

2个属性用CSS实现图片自适应浏览器

  • 作者: 压力山大3702532
  • 来源: 51数据库
  • 2021-10-01

1.创建设置图片的div

<div class="img-wrapper"></div>

2.设置其样式

设计原因:

  1. 开发中图片为固定大小,计算宽和高的比例即是padding-bottom的值
  2. 背景图不受内边距的影响,它会充满整个盒子(内容区+内边距)
  3. 由于第2条,索性让它充满整个盒子

设置三个属性即可

  1. 设置与父元素宽度的百分比下内边距
  2. 加载图片
  3. 背景图填充满整个区域
.img-wrapper {
            /*默认宽度是100%
            默认高度是靠元素支撑起来的*/
            /*width: 100%;*/
            /*height: 0;*/
            /*与父元素的%比*/
            padding-bottom: 10.21%;
            background-image: url('图片的地址');
            /*图片不重复出现*/
            /*background-repeat: no-repeat;*/
            background-size: 100% 100%;
        }

代码中注释的属性可以加上去,更加确保万无一失,不加的话,目前测试还没有bug。

3.效果图

原始大小:

缩小后:

4.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            /*设置body属性没有外边距*/
            margin: 0;
        }
        .img-wrapper {
            /*默认宽度是100%
            默认高度是靠元素支撑起来的*/
            /*width: 100%;*/
            /*height: 0;*/
            /*与父元素的%比*/
            padding-bottom: 10.21%;
            background-image: url('https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3b86ede4dd31d7c126d56fbdde4f855.jpg?thumb=1&w=1533&h=150&f=webp&q=90');
            /*background-repeat: no-repeat;*/
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <div class="img-wrapper"></div>
</body>
</html>

5. 真实案例分析

5.1 案例现状


由图可以看出,小米官网的图片并不是随着页面的变化进行自适应的,于是请看源代码

5.2 代码整改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            /*设置body属性没有外边距*/
            margin: 0;
        }
        .item{
            width: 1226px;
            height: 120px;
            margin: 0 auto;
        }
        .img-wrapper {
            /*默认宽度是100%
            默认高度是靠元素支撑起来的*/
            /*width: 100%;*/
            /*height: 0;*/
            /*与父元素的%比*/
            padding-bottom: 10.21%;
            background-image: url('https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3b86ede4dd31d7c126d56fbdde4f855.jpg?thumb=1&w=1533&h=150&f=webp&q=90');
            /*background-repeat: no-repeat;*/
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
<div class="item">
<div class="img-wrapper"></div>
</div>
</body>
</html>

5.3 实现后的效果


总的来说多看看源代码,生活中多留意一下,你会发现不一样的世界。

软件
前端设计
程序设计
Java相关