<div class="img-wrapper"></div>
设计原因:
设置三个属性即可
.img-wrapper {
/*默认宽度是100%
默认高度是靠元素支撑起来的*/
/*width: 100%;*/
/*height: 0;*/
/*与父元素的%比*/
padding-bottom: 10.21%;
background-image: url('图片的地址');
/*图片不重复出现*/
/*background-repeat: no-repeat;*/
background-size: 100% 100%;
}
代码中注释的属性可以加上去,更加确保万无一失,不加的话,目前测试还没有bug。
原始大小:
缩小后:
<!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>
由图可以看出,小米官网的图片并不是随着页面的变化进行自适应的,于是请看源代码
<!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>
总的来说多看看源代码,生活中多留意一下,你会发现不一样的世界。
本文地址:https://blog.csdn.net/wxc1207/article/details/107498783
如对本文有疑问, 点击进行留言回复!!
css深入剖析transform的translate和perspective
HCIE第四天总结(典型组网之一:CSS+Eth-Trunk+iStack)
了解下Apache Elasticsearch 和 Kibana
网友评论