DIV+CSS图片自动适应浏览器宽度
我想实现这样一个效果
图片宽1600，我想适应不同的分辨率
浏览器不管分辨率多大，图永远居中
如，分辨率是 1024X768（比图小），那么图片就显示1024px，并且是显示图中间的内容，多余的不显示，没有横向滚动条
<style>
div{position:absolute;}
.main{background-image:url("*.*");top:0px;bottom:0px;left:0px;right:0px;}
</style>
<div id="idMain" class="main">
</div>
<script>
window.onload=function()
{
var id_main=document.getElementById("idMain");
var w=Screen.width;//
var h=Screen.height;//
var l;
var t;
w=(w<1600)?-(1600-w):w-1600;
h=(h<*)?-(*-h):*-h;//
l=w/2;
t=h/2;
id_main..style.backgroundPosition=l+"px "+t+"px";
}
</script>
div{position:absolute;}
.main{background-image:url("*.*");top:0px;bottom:0px;left:0px;right:0px;}
</style>
<div id="idMain" class="main">
</div>
<script>
window.onload=function()
{
var id_main=document.getElementById("idMain");
var w=Screen.width;//
var h=Screen.height;//
var l;
var t;
w=(w<1600)?-(1600-w):w-1600;
h=(h<*)?-(*-h):*-h;//
l=w/2;
t=h/2;
id_main..style.backgroundPosition=l+"px "+t+"px";
}
</script>
楼主要的是不是这个效果，代码没测试过，楼主自测。
温馨提示：内容为网友见解，仅供参考
第1个回答 推荐于2018-05-14
给图片加上style=“width:100%;max_width:1600px;”
纯css实现，兼容现行所有主流浏览器
纯css实现，兼容现行所有主流浏览器
第2个回答 2013-07-29
<style type="text/css">
.bgbox
{
position:absolute;
width:100%;
height:100%;
left:0px;
top:0px;
text-align:center;
}
.box
{
width:100%;
height:100%;
max-width:400px;
max-height:300px;
background-image: url('/upload/comlogo/2013-07/058e6e5caa6d4a42a7ef30e6389eb170.jpg');
background-repeat: no-repeat;
background-position: center center;
display:inline-block;
}
</style><body>
<div class="bgbox">
<div class="box"></div>
</div>
</body>
.bgbox
{
position:absolute;
width:100%;
height:100%;
left:0px;
top:0px;
text-align:center;
}
.box
{
width:100%;
height:100%;
max-width:400px;
max-height:300px;
background-image: url('/upload/comlogo/2013-07/058e6e5caa6d4a42a7ef30e6389eb170.jpg');
background-repeat: no-repeat;
background-position: center center;
display:inline-block;
}
</style><body>
<div class="bgbox">
<div class="box"></div>
</div>
</body>
左右能居中，垂直暂时不能的
第3个回答 2013-07-28
很简单，控制外边这个div
<div style=" width:1600px;margin:auto;height:500px;">
<img src="a.jpg"/>
</div>
<div style=" width:1600px;margin:auto;height:500px;">
<img src="a.jpg"/>
</div>
第4个回答 2013-07-28
这个可以用js来实现，js获取屏幕的高度，和宽度，但是 这样对图片要求高，如果 图片被拉长，拉宽，会失真，很影响美观！追问
这个我已经设置了，超过1600px，图片不会放大，而是居中
您可能没明白我的具体问题，如果浏览器小于1024px，图片不缩小，而是显示中间那部分
相似回答
