H5中图片按照比例收缩,放大
2019-09-17 09:54:43来源:博客园 阅读 ()
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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
- css:chorm调试工具(修改样式、重置缩放比例、错误提示) 2020-05-30
- CSS背景图片的6个有趣的技巧 2020-05-12
- HTML连载84-添加中部的图片 2020-04-21
- 11.行盒垂直对齐和图片的底部白边问题 2020-04-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash