首页 > 开发 > JS > 正文

不同屏幕下图片缩放问题?

2017-09-05 12:55:35  来源:网友分享

如何实现像这个网站 500px一样的效果, 在不同的屏幕下 图片都能自适应缩放? 有哪些技术可以实现呢?

解决方案

首先,回答你“不同屏幕下,图片都能自适应缩放”这个问题:
既然需要响应式,那么当然宽度不要用px这个单位,尽量使用%这个单位,给个图片自适应缩放的代码如下:

css.img-responsive {  width:100%;//宽度指定百分比,这里写了100%,相对于父级的宽度的比例来计算  height:auto; //宽度指定百分比之后,高度自适应,这样子图片不会变形}

深入一点,上面这种方案会导致高度塌陷的问题:也就是图片很大加载慢的时候一开始图片高度为0,然后突然间就撑高,这种体验不好,解决方法有padding-top的hack,或者用rem来计算宽高,当然等你真正做到这些项目的时候再来考虑不迟.