css如何让图片根据显示器的尺寸来居中显示？

html-css016

css如何让图片根据显示器的尺寸来居中显示？,第1张

要是不用支持 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

HTML CSS中实现DIV中的图片水平垂直居中对齐的方法：

所谓的图片水平垂直居中就是把图片放在一个容器元素中（容器大于图片尺寸或是指定了大小的容器），并且图片位居此容器正中间（中间是指元素容器的正中间），而图片不是以背景图片（background-image）形式展示，是以<img>元素形式展示的。如下图所示：

1、解决水平居中的办法：如果图片左浮动并且"display:inline"时，只要给图片设置一个"text-align:center"属性，就顺利解决了水平居中。

2、解决垂直居中的办法：使用display:table-cell和设置了display:inline-block的线合span。

完整例子：

html代码：

<ul class="imgWrap clearfix">

<li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>

</ul>

css代码：

<style type="text/css">

.imgWrap li {

float: left

border: solid 1px #666

margin: 10px 10px 0 0

list-style: none

border-collapse: collapse

}

.imgWrap a {

background: #ffa url(images/gridBg.gif) repeat center

width: 219px

height: 219px

display: table-cell/*图片容器以表格的单元格形式显示*/

text-align: center/* 实现水平居中 */

vertical-align: middle/*实现垂直居中*/

}

.imgWrap a:hover {

background-color: #dfd

}

.imgWrap img {

border: solid 1px #66f

vertical-align: middle/*图片垂直居中*/

}

</style>

实现效果如下：