css如何让图片根据显示器的尺寸来居中显示？
如果一个图片的宽度是1440px的话那么如果设置宽度为100%的话图片不能根据屏幕宽度来全部显示，请问如何解决...
如果一个图片的宽度是1440px的话那么如果设置宽度为100%的话 图片不能根据屏幕宽度来全部显示，请问如何解决
展开
4个回答
展开全部
要是不用支持 IE7 的话非常建议使用 CSS3 + 少许特殊技巧
看我实例
<body>
<img src="background.jpg" id="background-full" />
<div id="main">
... 你的 HTML 内容 ...
</div>
</body>
---
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#background {
z-index: -999;
// z-index 是为了把 IMG 推到网页最後层
min-height: 100%;
min-width: 1440px;
background-position: center;
background-size: cover;
// background-size 是 CSS3 新特性，cover 就是占用全屏，你也可以改用 background-size: contain 占用全屏的比例高
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#main {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
}
// #main 是我随便乱写的
应该可以做 LZ 你想要效果，不行的话把 Background 图片嵌进 CSS 当作 background-image 然後用 blank.png (全透明图) 取代本来的 IMG
看我实例
<body>
<img src="background.jpg" id="background-full" />
<div id="main">
... 你的 HTML 内容 ...
</div>
</body>
---
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#background {
z-index: -999;
// z-index 是为了把 IMG 推到网页最後层
min-height: 100%;
min-width: 1440px;
background-position: center;
background-size: cover;
// background-size 是 CSS3 新特性，cover 就是占用全屏，你也可以改用 background-size: contain 占用全屏的比例高
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#main {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
}
// #main 是我随便乱写的
应该可以做 LZ 你想要效果，不行的话把 Background 图片嵌进 CSS 当作 background-image 然後用 blank.png (全透明图) 取代本来的 IMG
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
肯定不能。这用CSS是完成不了，需要借助JS完成，JS判断用户屏幕，将图片缩放。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
max-width:100%;max-height:100%;
不需要垂直局中吧，那就不说了
忘了 IE6不支持这玩意，要单独写一个js照顾一下IE6
不需要垂直局中吧，那就不说了
忘了 IE6不支持这玩意，要单独写一个js照顾一下IE6
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
img { max-width: 100%;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
