基于HTML5、CSS3的响应式图片处理

最新推荐文章于 2023-01-10 01:29:40 发布

weixin_33924220

最新推荐文章于 2023-01-10 01:29:40 发布

阅读量86

点赞数

原文链接：https://my.oschina.net/antsky/blog/353054

版权

为什么80%的码农都做不了架构师？>>>

完整代码（或者看下面的要点小结）：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
        * { margin: 0px; padding: 0px; }
        /** 关键在这里下面一行 **/
        img { max-width: 100%; height:auto; width: auto\9; /* ie8 */ }
        /** 这里的宽和高是背景图片的实际尺寸，主要用于在电脑上完全显示 **/
        #wrap { width: 1080px; height: 1848px; margin: 0px auto; position: relative; }
        /** 这边的宽和高是下载按钮的实际尺寸 **/
        #wrap .btn_download { width: 774px; height: 210px; float: left; position: absolute; z-index: 99999; display: none; }
        /** 当视口宽度小于背景图片的实际宽度 1080px 时 **/
        @media screen and (max-width: 1080px) {
            /* 重新设置背景图片所属父级的宽、高 */
            #wrap { width: 100%; height: auto; }
            /* 重新设置下载按钮的宽、高，这里的高宽度是根据 774/1080=0.71666666... 得到，即下载按钮的宽度与背景图片的宽度比 */
            #wrap .btn_download { width: 71%; height: auto; }
        }
    </style>
</head>
<body>
    <div id="wrap">
        <img src="./images/bg_2_download.png" alt="" id="btn_download">
        <img src="./images/bg_2.jpg" alt="" id="img_back">
    </div>
<script>

//
var oImgBack = document.getElementById("img_back");
var oBtnDownload = document.getElementById("btn_download");

window.onload = function() {

    // 页面载入或刷新时，初始化下载按钮的位置
    setBtnLayout();

    // 视口改变时，重新计算下载的按钮的相对位置
    this.onresize = function() { setBtnLayout(); }
}

/**
 * 根据背景宽度和高度，计算下载按钮的相对布局位置
 */
function setBtnLayout() {
    // 设计给到的切图标注中，实际的top值为1499px、left值为154px
    // 这里的 0.81111 是根据 1499/1848=0.81111... ，即top值与图片实际高度的比例 
    // 这里的 0.1425 是根据 154/1080=0.1425... ，即left值与图片实际宽度的比例 
    var iBtnTop = Math.ceil(oImgBack.offsetHeight * 0.8111);
    var iBtnLeft = Math.ceil(oImgBack.offsetWidth * 0.1425);
    oBtnDownload.style.top = iBtnTop + "px";
    oBtnDownload.style.left = iBtnLeft + "px";
    oBtnDownload.style.display = "block";
}
</script>
</body>
</html>

主要点小结：

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

img { max-width: 100%; height:auto; width: auto\9; /* ie8 */ }

当视口改变时，对下载按钮宽度、top值、left值的计算与处理
其它对于html5、css3相关内容，请自行查阅，这里不做详细说明

转载于:https://my.oschina.net/antsky/blog/353054

weixin_33924220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于HTML5、CSS3的响应式图片处理

为什么80%的码农都做不了架构师？>>> ...
复制链接

扫一扫

基于HTML5、CSS3的响应式图片处理

“相关推荐”对你有帮助么？