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


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

css3 css 前端开发 JavaScript

工口star 10 years, 10 months ago

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

雏菊万岁哇哈 answered 10 years, 10 months ago

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


 css


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

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

我不是夜风 answered 10 years, 10 months ago

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

noteli answered 10 years, 10 months ago

css Media Queries 响应式布局

野生mio酱 answered 10 years, 10 months ago

Your Answer