2个属性用CSS实现图片自适应浏览器
程序员文章站
2022-06-24 12:19:54
1.创建设置图片的div2.设置其样式设计原因：开发中图片为固定大小，计算宽和高的比例即是padding-bottom的值背景图不受内边距的影响，它会充满整个盒子（内容区+内边距）由于第2条，索性让它充满整个盒子设置三个属性即可设置与父元素宽度的百分比下内边距加载图片背景图填充满整个区域.img-wrapper { /*默认宽度是100% 默认...
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 实现后的效果
总的来说多看看源代码，生活中多留意一下，你会发现不一样的世界。
本文地址：https://blog.csdn.net/wxc1207/article/details/107498783