扫码关注官方订阅号
如何实现像这个网站 500px一样的效果, 在不同的屏幕下 图片都能自适应缩放? 有哪些技术可以实现呢?
小伙看你根骨奇佳,潜力无限,来学PHP伐。
首先,回答你“不同屏幕下,图片都能自适应缩放”这个问题: 既然需要响应式,那么当然宽度不要用px这个单位,尽量使用%这个单位,给个图片自适应缩放的代码如下:
宽度
px
%
css.img-responsive { width:100%;//宽度指定百分比,这里写了100%,相对于父级的宽度的比例来计算 height:auto; //宽度指定百分比之后,高度自适应,这样子图片不会变形 }
css
.img-responsive { width:100%;//宽度指定百分比,这里写了100%,相对于父级的宽度的比例来计算 height:auto; //宽度指定百分比之后,高度自适应,这样子图片不会变形 }
深入一点,上面这种方案会导致高度塌陷的问题:也就是图片很大加载慢的时候一开始图片高度为0,然后突然间就撑高,这种体验不好,解决方法有padding-top的hack,或者用rem来计算宽高,当然等你真正做到这些项目的时候再来考虑不迟.
高度塌陷
padding-top
rem
css Media Queries响应式布局
用JS获取屏幕的宽高赋值给图片。
此问题这周遇到过这个需求,方案是,将img的长和宽都设置成100%,里面添加图片,在苹果手机上是等比例缩小(图片很宽,很大),但是在安卓上确实被拉长了,为此,我的想法是图片的原始宽度/当前屏幕的宽度。获取图片的实际高度,然后除以之前的比例,就能获取到适应当前屏幕的图片的高度,最后用js调整。就可以适应任意屏幕了。用手机写不易,需要demo,@我,周一上班之后发给你
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
首先,回答你“不同屏幕下,图片都能自适应缩放”这个问题:
既然需要响应式,那么当然
宽度
不要用px
这个单位,尽量使用%
这个单位,给个图片自适应缩放的代码如下:深入一点,上面这种方案会导致
高度塌陷
的问题:也就是图片很大加载慢的时候一开始图片高度为0,然后突然间就撑高,这种体验不好,解决方法有padding-top
的hack,或者用rem
来计算宽高,当然等你真正做到这些项目的时候再来考虑不迟.css Media Queries响应式布局
用JS获取屏幕的宽高赋值给图片。
此问题这周遇到过这个需求,方案是,将img的长和宽都设置成100%,里面添加图片,在苹果手机上是等比例缩小(图片很宽,很大),但是在安卓上确实被拉长了,为此,我的想法是图片的原始宽度/当前屏幕的宽度。获取图片的实际高度,然后除以之前的比例,就能获取到适应当前屏幕的图片的高度,最后用js调整。就可以适应任意屏幕了。用手机写不易,需要demo,@我,周一上班之后发给你