H5中图片按照比例收缩,放大

匿名 (未验证) 提交于 2019-12-02 20:32:16

需求:后台传过来的图片不能够压缩,即使部分被截取也可以

传统方案:设置img元素如下:

       width: auto;     height: auto;     max-width: 100%;     max-height: 100%;

但是这种方案需要img元素的外部设置一层父元素,高度与宽度为图片的高宽度

缺点:层级嵌套又增加了一层,不利于性能

 现有方案:css的img有一个比较小众的属性 object-fit,具体可参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

  object-fit:cover 即可按照比例 注意兼容性哦

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!