lol网站模板,抚顺市城市建设档案馆网站,搜索引擎优化与推广的产生及发展,免费网络游戏排行榜前十名1.对于图片#xff0c;默认只设置图片的一个宽或高#xff0c;那么另一个值就会按照图片真实比例缩放 图片因为本身存在宽高比#xff0c;所以设置一个值#xff0c;另一个值自动也就根据真实的比例对应上
2.但跟pc的不一样#xff0c;移动端的图片很多都不是固定的宽高的…1.对于图片默认只设置图片的一个宽或高那么另一个值就会按照图片真实比例缩放 图片因为本身存在宽高比所以设置一个值另一个值自动也就根据真实的比例对应上
2.但跟pc的不一样移动端的图片很多都不是固定的宽高的icon图标与头像等一些小图还是固定大小的所以就面临一个问题不能设置一个具体的高度于是就会出现加载过程其他内容随着图片的加载慢慢向下移动
我们怎么确定容器的高度从而消除慢慢向下加载的影响呢
首先必须设置height为0按照浏览器从上而下、从外到内的渲染机制首先父容器的高度为0而父容器的宽度就是图片的宽度再根据百分比padding-top等比例设置父容器的高度最后再渲染子元素图片让其百分百充满父容器。这样就会保证在图片宽度任意变化的情况下高度仍然是等比例的所以不仅保证了外层容器的宽高比还撑开了容器最后使用图片绝对定位设置宽高100%即可实现按照比例缩放
放在移动端假设先设置外层容器宽度为50%随着用户缩放屏幕容器宽度改变则外层容器的高度按照比例缩小这样就能保证容器的自适应显示
实例
