css如何让图片根据显示器的尺寸来居中显示？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css如何让图片根据显示器的尺寸来居中显示？相关的知识，希望对你有一定的参考价值。
如果一个图片的宽度是1440px的话那么如果设置宽度为100%的话 图片不能根据屏幕宽度来全部显示，请问如何解决
要是不用支持 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 参考技术A 肯定不能。这用CSS是完成不了，需要借助JS完成，JS判断用户屏幕，将图片缩放。 参考技术B max-width:100%;max-height:100%;
不需要垂直局中吧，那就不说了
忘了 IE6不支持这玩意，要单独写一个js照顾一下IE6 参考技术C img max-width: 100%;
CSS和不同尺寸的显示器？
【中文标题】CSS和不同尺寸的显示器？【英文标题】：CSS and different size of monitor? 【发布时间】：2011-03-02 13:06:27 【问题描述】：我正在做一个网站 (WIP)。我遇到了一些CSS问题，希望你们能帮助我。
我现在的情况：
我有一张图片，我们称之为“bg.png”，宽度约为 2500 像素，背景图片的中心有我的徽标。 我的网站应该面向所有规模（从 800 x 600 到 2400 x XXX 的小型）用户。我的问题：
如何使背景图片（bg.png）居中，使徽标始终位于不同尺寸的显示器屏幕的居中（水平）？【问题讨论】：
作为新用户，如果答案符合您的需求，请务必点击“接受”。 顺便说一下问题（当前情况 -> 问题/期望的行为）。 您应该知道有些屏幕大于 2500。而且您也可以在多个屏幕上扩展某些内容。所以 2500 不是一个足够大的限制。 谢谢大家，你们都很友好和乐于助人:) 【参考方案1】：如果它只是一个你可以使用的徽标文件
<style>
img
position:absolute;
left:-50%;
top:-50%;
z-index:-1;
</style>
【讨论】：
这不会使图像完全居中。图像的左侧居中，但图像的中心未居中。 为此，添加 margin-left: -50%, margin-top: -50%。【参考方案2】：#your_img
position: absolute;
left: 50%;
margin: -1250px;
当您将 img 元素放到另一个盒子上时，此解决方案是必要的。但要小心 - 它可能会改变父框的大小。
【讨论】：
【参考方案3】：#your_img
width: 2500px; //In example 2500px
margin: 50%;
padding: -1250px; // 2500 divided by 2
它可能在 Internet Explorer 上不起作用，但您可以使用 position: absolute 的小技巧，如上所述
【讨论】：
【参考方案4】：body background: url('bg.png') 50% 50% no-repeat;
这会将图片以全尺寸放置在页面的中心，并且用户将在其浏览器窗口允许的范围内看到尽可能多的背景图片。
【讨论】：
谢谢，它有效。但我需要再等 9 分钟才能接受答案。谢谢 Graphain 欢迎小学生，乐于助人。值得注册，这样您就可以随着时间的推移跟踪您的问题和答案，并鼓励其他人帮助您。 嗨 Graphain，它适用于 FF、chrome、opera 和 safari。但是在IE上不行，图片不显示。 问题已解决。而不是像这样将所有属性放在 1 行中： background: url('images/bg.png') 50% 50% no-repeat;我将它们分成： background: url('images/bg.png') no-repeat;背景位置：50% 50%; 很好的修复。也许顺序在 IE 上很重要，或者缺少一个属性（比如开始时的 bg 颜色）。以上是关于css如何让图片根据显示器的尺寸来居中显示？的主要内容，如果未能解决你的问题，请参考以下文章