原创投稿
  1. 爱玩数码首页
  2. 投稿

css高度自适应怎么实现出来（css背景图片高度自适应解决方案）

爱玩数码编辑 • • 投稿 • 阅读 32

在切图公司的web前端项目外包中，有的情况需要用背景图片来替代图片，使用背景图片替换img标签时，img标签可以根据屏幕宽度自适应高度，而背景图片却无法适应高度，使用css的内边距（padding）可以解决高度问题，因为垂直方向的padding值，根据宽度的大小来计算的，办法如下；

<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>

<div >

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

<div role=”img” aria-label=”banner img” ></div>

</div>

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至87172970@qq.com举报，一经查实，本站将立刻删除。

赞 (0)
爱玩数码编辑爱玩数码编辑管理员
0 0
« 上一篇 2023年5月15日 22:51:12
下一篇 » 2023年5月18日 20:28:03

相关推荐

发表评论

登录后才能评论