手机端 图片自适应屏幕尺寸

    <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>

  

时间: 2024-10-09 20:36:20

手机端 图片自适应屏幕尺寸的相关文章

手机端Html自适应屏幕大小

需要在html<head><meta name="viewport"          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> </head>  加入 手机端Html自适应屏幕大小,布布扣,bubuko.com

rem手机端页面自适应完美解决方案(最新)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> ! function(e) { function t(a) { if(i[a]) return i[a].exports; var n = i[a] = { exports: {},

手机端图片滑动切换效果

最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环切换等等,具体可以拿demo代码自己本地试试,注意只支持手机端哦 大概思路:通过touchstart.touchmove.touchend 三个事件加上css3的3d变化效果配合,实现滑动切换图片, 开发是基于Zepto框架,当然也支持其他任何一款手机端框架,只需将代码中的美元符号$换为指定框架操作

手机端图片轮播插件

官网:http://bxslider.com/ 能自动适应屏幕大小,滑动图片 引用文件:query.bxslider.css和jquery.bxslider.min.js   手机端图片轮播插件

70.JS---利用原生js做手机端网页自适应解决方案rem布局

利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, prem) { var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.s

ios navigationcontroller 滑动返回与webview加载html图片自适应屏幕宽度

1 .ios navigationcontroller 滑动返回 滑动返回是navigationcontroller默认返回按钮自带的功能,如果返回按钮自定义该功能失效, 解决的办法有两个: ① self.navigationItem.backBarButtonItem =   [[UIBarButtonItem alloc]initWithCustomView:button];//这个方法用不了 只能用 self.navigationItem.backBarButtonItem = [ [UI

改变图片的透明度,图片自适应屏幕

改变图片的透明度 float speed=0.2f; float starttime; void Start () { starttime = Time.time; } void Update() { GUITexture.color.a = Mathf.Lerp (0, 1, (Time.time - starttime) * speed); } --------------------------------------------------------------------- 图片自适

html中图片自适应浏览器,宽度高度自适应,图片自适应屏幕的小而不是宽高固定不变

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Show.aspx.cs" Inherits="Wlxxs.Web.Xxs.Show" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

html图片自适应屏幕大小(手机)

body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul { margin: 0; padding: 0 } body { min-width: 320px; font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif; color: #333; -webkit-text-s