<style>

.wrap{

width: 100%;

html图片宽度自适应css配景图片高度自顺应解决计划 PHP

}

.banner{

width: 100%;

max-width: 490px; /图片的宽度不大于图片实际像素/

height: 0;

max-height: 329px;

padding-bottom: 67.14%; /根据图片高宽比打算/

margin: 0 auto;

background: url(\"大众images/test.jpg\"大众) no-repeat center;

background-size: cover;

}

@media only screen and (min-width: 490px) {

/屏幕大于490时，将背景框高度设置为图片高度的实际像素/

.banner{

height: 329px;

padding-bottom: 0;

}

}

</style>

<div class=\公众wrap\"大众>

<!--role属性 aria-label属性增强html的可读性，更语义化-->

<div role=\公众img\"大众 aria-label=\"大众banner img\"大众 class=\"大众banner\公众></div>

</div>

来源：切图网 qietu.com