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

最新推荐文章于 2024-05-22 14:34:14 发布

CLAY超

最新推荐文章于 2024-05-22 14:34:14 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： html css css3 html5

本文链接：https://blog.csdn.net/wxc1207/article/details/107498783

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.创建设置图片的div

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

2.设置其样式

设计原因：

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

设置三个属性即可

设置与父元素宽度的百分比下内边距
加载图片
背景图填充满整个区域

.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 实现后的效果

在这里插入图片描述
总的来说多看看源代码，生活中多留意一下，你会发现不一样的世界。

CLAY超

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
2个属性用CSS实现图片自适应浏览器

1.创建设置图片的div<div class="img-wrapper"></div>2.设置其样式设计原因：开发中图片为固定大小，计算宽和高的比例即是padding-bottom的值背景图不受内边距的影响，它会充满整个盒子（内容区+内边距）由于第2条，索性让它充满整个盒子设置三个属性即可设置与父元素宽度的百分比下内边距加载图片背景图填充满整个区域.img-wrapper { /*默认宽度是100% 默认
复制链接

扫一扫