背景图片根据宽度自适应高度的方案

红太狼 2022-08-23 03:52 328阅读 0赞

移动前端自适应开发过程中，使用背景图片替换img标签时，img标签可以根据屏幕宽度自适应高度，而背景图片却无法适应高度，使用css的内边距（padding）可以解决高度问题，因为垂直方向的padding值，根据宽度的大小来计算的，办法如下；

  1. <style> .wrap{ width: 100%; } .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>
  2. <div class="wrap">
  3.     <!--role属性 aria-label属性增强html的可读性，更语义化-->
  4.     <div role="img" aria-label="banner img" class="banner"></div>
  5. </div>

发表评论

表情：
评论列表 （有 0 条评论，328人围观）

还没有评论，来说两句吧...

相关阅读

    相关 H5图片高度根据宽度自适应

    每个图片原始宽高不一样，缩小每个图片到指定的宽度，高度等比例缩小，实现图片高度自适应。 下面看看实现代码： 下面是uniapp的条件编译，如果是小程序场景就使用 mode

    女爷i女爷i/ 0 赞/ 470 阅读