DIV+CSS图片自动适应浏览器宽度

我想实现这样一个效果图片宽1600,我想适应不同的分辨率浏览器不管分辨率多大,图永远居中如,分辨率是1024X768(比图小),那么图片就显示1024px,并且是显示图中... 我想实现这样一个效果
图片宽1600,我想适应不同的分辨率
浏览器不管分辨率多大,图永远居中
如,分辨率是 1024X768(比图小),那么图片就显示1024px,并且是显示图中间的内容,多余的不显示,没有横向滚动条
展开
 我来答
百880
2013-07-29 · TA获得超过238个赞
知道小有建树答主
回答量:213
采纳率:100%
帮助的人:63.2万
展开全部
<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>

楼主要的是不是这个效果,代码没测试过,楼主自测。

文心一梦
推荐于2018-05-14
知道答主
回答量:60
采纳率:100%
帮助的人:15.1万
展开全部
给图片加上style=“width:100%;max_width:1600px;”

纯css实现,兼容现行所有主流浏览器
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
雨之快乐dca51ae
2013-07-29 · TA获得超过327个赞
知道小有建树答主
回答量:308
采纳率:33%
帮助的人:120万
展开全部
 <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>

左右能居中,垂直暂时不能的

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友6780c80eb
2013-07-28 · TA获得超过132个赞
知道小有建树答主
回答量:129
采纳率:0%
帮助的人:68.7万
展开全部
很简单,控制外边这个div
<div style=" width:1600px;margin:auto;height:500px;">
<img src="a.jpg"/>
</div>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友f604a81
2013-07-28 · 超过60用户采纳过TA的回答
知道小有建树答主
回答量:187
采纳率:0%
帮助的人:104万
展开全部
这个可以用js来实现,js获取屏幕的高度,和宽度,但是 这样对图片要求高,如果 图片被拉长,拉宽,会失真,很影响美观!
追问
这个我已经设置了,超过1600px,图片不会放大,而是居中
您可能没明白我的具体问题,如果浏览器小于1024px,图片不缩小,而是显示中间那部分
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 2条折叠回答
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式