首页 新闻 会员 周边

手机web开发中如何做到图片自适应?

0
悬赏园豆:30 [待解决问题]

图片宽度与高度是随机的;
然后图片外面的层占整个屏幕的一半,高度固定,这样的话,在大屏的手机中显示的图片为正方形,
请问怎样才能做到图片外面的层按正方形等比例缩放。

面对阳光努力向上的主页 面对阳光努力向上 | 初学一级 | 园豆:179
提问于:2014-12-08 11:23
< >
分享
所有回答(5)
0

按正方形等比缩放, 你可以用js控制。  控制一个参数(width或height)就行;  

<script type="text/javascript">
$(function(){
var imglist =document.getElementsByTagName("img");
//安卓4.0+等高版本不支持window.screen.width,安卓2.3.3系统支持
var _width;
doDraw();

window.onresize = function(){
    //捕捉屏幕窗口变化,始终保证图片根据屏幕宽度合理显示
    doDraw();
}

function doDraw(){
    _width = window.innerWidth;
    for( var i = 0, len = imglist.length; i < len; i++){
        DrawImage(imglist[i],_width);
    }
}

function DrawImage(ImgD,_width){ 
    var image=new Image(); 
    image.src=ImgD.src; 
    image.onload = function(){
        //限制,只对宽高都大于30的图片做显示处理,换成你想要的宽度。
        if(image.width>30 && image.height>30){ 
            if(image.width>_width){
                ImgD.width=_width; 
                ImgD.height=(image.height*_width)/image.width; 
            }else{ 
                ImgD.width=image.width; 
                ImgD.height=image.height; 
            } 

        }    
    }
}   
})
</script>
问天何必 | 园豆:3311 (老鸟四级) | 2014-12-08 12:30
0

一般我们是不控制图片的 图片都是宽度100% 高度auto

要控制的是装图片的容器宽度

一般我们开发手机页面都用Bootstrap 你可以参考下
传送门

丫的 | 园豆:1575 (小虾三级) | 2014-12-08 13:57
0

图片自适应?  height 根据整个页面的百分比计算,width就来100%吧!

(比如:页面height:1500px,图片为heig:60px。则就可以设置图片高为:4%,)

这样我基本可以解决图片自适应的问题!嘻嘻

Angelべ尐瑞 | 园豆:219 (菜鸟二级) | 2014-12-13 13:12
1

宽度为100%,高度为auto,即width:100%;height:auto; 

ifIhaveWings | 园豆:187 (初学一级) | 2015-11-24 15:52
0

比如 外层的class=box

var w=$(".box").width();// 这里获取到宽度

$(".box").height(w) //然后让宽度等与高度就是正方形

匠人 | 园豆:280 (菜鸟二级) | 2015-12-15 13:09
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册