css - 无高度div，背景图片自适应屏幕宽度，如何解决？

问题描述

问 题

• 还原页面时遇到的一个小问题,.bg中无内容，但是有个背景图，需要宽度100%，高度自适应，请问应该如何设置？移动端页面，需要考虑不同尺寸。
  <div class='bg'></div>

• 移动端让图片宽度100%,高度自适应，一般解决方案是什么？用ＪＳ算？能不能用css实现

顺便问一句，类似于这种是用background好还是<img src='./source'>好，各自适用哪些场景？

解决方案

如果是纯图片展示img设置width:100%就好；如果作为背景，在父元素上设置background-size:100% auto,高度由padding-top设置百分比撑开，然后子元素通过绝对定位来承载其它内容

这篇关于css - 无高度div，背景图片自适应屏幕宽度，如何解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！