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

2019-09-17 09:54:43来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

传统方案:设置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 即可按照比例 注意兼容性哦

 


原文链接:https://www.cnblogs.com/tony-stark/p/11507012.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端开发CSS3——文本样式和盒子及样式

下一篇:aiohttp上报:Got more than 8190 bytes (10160) when reading S