打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
html+css 图片自适应

background-size:cover | cotain 背景图

object-fill: fill/ contain / cover / none / scale-down 

  • fill 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。
  • contain: 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致,长的那条等比缩放,可能会有留白。
  • cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致,短的那条等比缩放。可能会有部分区域不可见。 none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。
  • scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸,保持图片的原有尺寸,不会放大失真;容器尺寸小于图片内容尺寸,用法跟contain一样。

今天处理自适应问题时,banner插入的图片 

  • weidth:100%
  • height:auto

嗯哼,完全不对(看需求),应该高度一定 然后再自适应

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
办公技巧 | Word图片大小不一,教你一键批量调整图片大小
图片尺寸大小怎么修改?三步就能完成图片尺寸的大小修改
手机上如何修改图片尺寸大小?看过来看过来
微信头像尺寸太大怎么办?
如何发200K以下的图片,尽量保持图片原有品质
JavaScript奇技淫巧:网页内容防复制
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服