码迷,mamicode.com
首页 > 其他好文 > 详细

大图片随浏览器水平居中显示

时间:2016-04-05 16:18:03      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:

 

 

css样式:

<style>
*{margin: 0; }
.ads-detail {
width: 1000px;
/*height: 1000px;*/
position: relative;
margin: 0 auto;
}
.ads-detail p{
position: absolute;
width:1920px;
left:-465px;
top:0px;
}

.ads-detail img {
display: block;
width: 100%;
}
</style>

js代码:
<script>
window.onload = function(){
//设置ads_detail高度
var arrP = document.getElementById("ads-detail").getElementsByTagName("p");
var adsHeight = 0;
for(var i = 0 ; i < arrP.length; i++){
adsHeight += arrP[i].clientHeight || arrP[i].offsetHeight;
}
document.getElementById("ads-detail").style.height = adsHeight  + "px";
};
</script>

html结构:
<div style=" width: 100%; overflow: hidden;">
<div class="ads-detail" id="ads-detail">
<p>
<img src="0e7422be-e329-4eb9-a1a3-f85491c18d14.jpg">
</p>
</div>
</div>

大图片随浏览器水平居中显示

标签:

原文地址:http://www.cnblogs.com/mengwei-ziyun/p/5355176.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!