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

完整代码(或者看下面的要点小结)：

html>

Document

* { 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; }

}

        

        

//

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

}

主要点小结：

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

当视口改变时，对下载按钮宽度、top值、left值的计算与处理

其它对于html5、css3相关内容，请自行查阅，这里不做详细说明