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

Question

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

Answer 1

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

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

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

Answer 2

css Media Queries响应式布局

Answer 3

用JS获取屏幕的宽高赋值给图片。

Answer 4

此问题这周遇到过这个需求，方案是，将img的长和宽都设置成100%，里面添加图片，在苹果手机上是等比例缩小（图片很宽，很大），但是在安卓上确实被拉长了，为此，我的想法是图片的原始宽度/当前屏幕的宽度。获取图片的实际高度，然后除以之前的比例，就能获取到适应当前屏幕的图片的高度，最后用js调整。就可以适应任意屏幕了。用手机写不易，需要demo，@我，周一上班之后发给你