要求如果图片小雨DIV，则居中显示。。。
图片大于DIV，就拉伸显示。。。这个CSS怎么弄啊。。。大侠帮忙。。。100分！！！
9 个解决方案
#1
用js计算图片和div的长宽 之后比较设置
#2
是缩小显示吧.
可以用CSS表达式,很方便就实现了.但性能差些.
一般用JS来实现,可避免没必要的重复计算.
#3
需要js来实现 css无法做判断
#4
“图片大于DIV，就拉伸显示”，这里是指拉伸图片还是DIV呢？
如果是指DIV，但楼主开始就规定了“DIV的长和宽是CSS里固定的”，
因此是矛盾的。如果是指拉伸图片，但图片已经大于DIV了，
你还要怎样拉伸？缩小还说得过去。
如果楼主想实现下面的效果：
一个div作为img的容器，div的“初始”大小已经设定，当img的大小大于div的大小时，
拉伸div以包裹img，当img的宽度小于div的宽度时，img在div内水平居中显示（当然垂直居中也可以实现）。
这个效果可以仅使用HTML+CSS来实现，代码如下：
[code=html][<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div
{ min-width:600px; min-height:300px;
position:absolute; padding:10px;
text-align:center;
border:1px solid;
}
</style>
</head>
<body>
<div><img src="800600.jpg" alt="" /></div>
</body>
</html>
/code]
如果是指DIV，但楼主开始就规定了“DIV的长和宽是CSS里固定的”，
因此是矛盾的。如果是指拉伸图片，但图片已经大于DIV了，
你还要怎样拉伸？缩小还说得过去。
如果楼主想实现下面的效果：
一个div作为img的容器，div的“初始”大小已经设定，当img的大小大于div的大小时，
拉伸div以包裹img，当img的宽度小于div的宽度时，img在div内水平居中显示（当然垂直居中也可以实现）。
这个效果可以仅使用HTML+CSS来实现，代码如下：
[code=html][<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div
{ min-width:600px; min-height:300px;
position:absolute; padding:10px;
text-align:center;
border:1px solid;
}
</style>
</head>
<body>
<div><img src="800600.jpg" alt="" /></div>
</body>
</html>
/code]
#5
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div
{ min-width:600px; min-height:300px;
position:absolute; padding:10px;
text-align:center;
border:1px solid;
}
</style>
</head>
<body>
<div><img src="800600.jpg" alt="" /></div>
</body>
</html>
#6
要缩小图像适应DIV也是可以只使用HTML=CSS的，只是不兼容IE6。例子如下：
更换宽度大于或小于DIV的图像即可看到效果。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div
{ width:650px;
padding:10px;
text-align:center;
border:1px solid;
}
img{ max-width:100%; max-height:100%; }
</style>
</head>
<body>
<div><img src="500400.jpg" alt="" /></div>
</body>
</html>
更换宽度大于或小于DIV的图像即可看到效果。
#7
用JS自动缩放功能
#8
你试试3楼的，就是不知道是不是你要的效果
#9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>未知大小的圖片在一個已知大小容器中的水平和垂直居中兼容IE-Firefox-Chrome</title>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<style type="text/css">
<!--
ul#FgWrap{width: 936px;margin: 0 auto;list-style: none;padding-top: 2em;}
ul#FgWrap li{float: left; margin: 0 10px 10px 0;background: #EEE}
.boxinner{
height:160px;
width:200px;
border: solid 1px #666;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.boxinner img {margin:0 auto;border: 4px solid #FFF;}
-->
</style>
<style type="text/css">
/* vertical align for IE */
.edge {width:0; height:100%; display:inline-block; vertical-align:middle;}
.container {text-align:center; width:100%; display:inline-block; vertical-align:middle;line-height:80%;}
/*加上line-height:80%消除IE-Firefox-Chrome三瀏覽器圖片下方多出的空白,使四邊空白闊度大小一樣*/
</style>
</head>
<body>
未知大小的圖片在一個已知大小容器中的水平和垂直居中兼容IE6~10/Firefox1.5~10+/Chrome<br>
本例使用CSS幾乎可以強力解決樓主提出的問題,請樓主試試！！
提示：下面所有連接的圖片大小均為 1920px × 1200px
<div id="forestganMiddle">
<ul id="FgWrap">
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img alt="" src="http://res2.windows.microsoft.com/resbox/en/windows/main/821d81fe-4315-4124-8b50-641c6eab0822_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="40" alt="" width="65" src="http://res1.windows.microsoft.com/resbox/en/windows/main/ba2b271e-c7f7-4b50-8ecf-77b54d65b73e_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="108" alt="" width="162" src="http://res2.windows.microsoft.com/resbox/en/windows/main/31abccff-5c20-4244-8377-06591f164286_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img alt="" width="100" src="http://res2.windows.microsoft.com/resbox/en/windows/main/eaaf3bc9-95ef-43fe-9f48-2667bf646cd8_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="80" alt="" width="130" src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/a00672ac-6bac-4eda-bdca-985036f30e10_13.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="140" alt="" width="180" src="http://res1.windows.microsoft.com/resbox/en/windows%207/main/abba3f36-8021-423c-99c8-759f33829d59_5.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="220" alt="" width="280" src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/39dcc240-86df-4e6e-94ea-d4fe4759eafa_31.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="180" alt="" width="230" src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/ab8825ee-520d-4147-beff-64b08115342e_5.jpg"
/></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img alt="" height="80" width="130" src="http://res1.windows.microsoft.com/resbox/en/windows%207/main/0c8013e4-0b98-4651-9d25-9e34704f3e4f_13.jpg" /></span></div>
</li>
</ul> </div></body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>未知大小的圖片在一個已知大小容器中的水平和垂直居中兼容IE-Firefox-Chrome</title>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<style type="text/css">
<!--
ul#FgWrap{width: 936px;margin: 0 auto;list-style: none;padding-top: 2em;}
ul#FgWrap li{float: left; margin: 0 10px 10px 0;background: #EEE}
.boxinner{
height:160px;
width:200px;
border: solid 1px #666;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.boxinner img {margin:0 auto;border: 4px solid #FFF;}
-->
</style>
<style type="text/css">
/* vertical align for IE */
.edge {width:0; height:100%; display:inline-block; vertical-align:middle;}
.container {text-align:center; width:100%; display:inline-block; vertical-align:middle;line-height:80%;}
/*加上line-height:80%消除IE-Firefox-Chrome三瀏覽器圖片下方多出的空白,使四邊空白闊度大小一樣*/
</style>
</head>
<body>
未知大小的圖片在一個已知大小容器中的水平和垂直居中兼容IE6~10/Firefox1.5~10+/Chrome<br>
本例使用CSS幾乎可以強力解決樓主提出的問題,請樓主試試！！
提示：下面所有連接的圖片大小均為 1920px × 1200px
<div id="forestganMiddle">
<ul id="FgWrap">
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img alt="" src="http://res2.windows.microsoft.com/resbox/en/windows/main/821d81fe-4315-4124-8b50-641c6eab0822_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="40" alt="" width="65" src="http://res1.windows.microsoft.com/resbox/en/windows/main/ba2b271e-c7f7-4b50-8ecf-77b54d65b73e_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="108" alt="" width="162" src="http://res2.windows.microsoft.com/resbox/en/windows/main/31abccff-5c20-4244-8377-06591f164286_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img alt="" width="100" src="http://res2.windows.microsoft.com/resbox/en/windows/main/eaaf3bc9-95ef-43fe-9f48-2667bf646cd8_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="80" alt="" width="130" src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/a00672ac-6bac-4eda-bdca-985036f30e10_13.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="140" alt="" width="180" src="http://res1.windows.microsoft.com/resbox/en/windows%207/main/abba3f36-8021-423c-99c8-759f33829d59_5.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="220" alt="" width="280" src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/39dcc240-86df-4e6e-94ea-d4fe4759eafa_31.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="180" alt="" width="230" src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/ab8825ee-520d-4147-beff-64b08115342e_5.jpg"
/></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img alt="" height="80" width="130" src="http://res1.windows.microsoft.com/resbox/en/windows%207/main/0c8013e4-0b98-4651-9d25-9e34704f3e4f_13.jpg" /></span></div>
</li>
</ul> </div></body>
</html>
#1
用js计算图片和div的长宽 之后比较设置
#2
是缩小显示吧.
可以用CSS表达式,很方便就实现了.但性能差些.
一般用JS来实现,可避免没必要的重复计算.
#3
需要js来实现 css无法做判断
#4
“图片大于DIV，就拉伸显示”，这里是指拉伸图片还是DIV呢？
如果是指DIV，但楼主开始就规定了“DIV的长和宽是CSS里固定的”，
因此是矛盾的。如果是指拉伸图片，但图片已经大于DIV了，
你还要怎样拉伸？缩小还说得过去。
如果楼主想实现下面的效果：
一个div作为img的容器，div的“初始”大小已经设定，当img的大小大于div的大小时，
拉伸div以包裹img，当img的宽度小于div的宽度时，img在div内水平居中显示（当然垂直居中也可以实现）。
这个效果可以仅使用HTML+CSS来实现，代码如下：
[code=html][<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div
{ min-width:600px; min-height:300px;
position:absolute; padding:10px;
text-align:center;
border:1px solid;
}
</style>
</head>
<body>
<div><img src="800600.jpg" alt="" /></div>
</body>
</html>
/code]
如果是指DIV，但楼主开始就规定了“DIV的长和宽是CSS里固定的”，
因此是矛盾的。如果是指拉伸图片，但图片已经大于DIV了，
你还要怎样拉伸？缩小还说得过去。
如果楼主想实现下面的效果：
一个div作为img的容器，div的“初始”大小已经设定，当img的大小大于div的大小时，
拉伸div以包裹img，当img的宽度小于div的宽度时，img在div内水平居中显示（当然垂直居中也可以实现）。
这个效果可以仅使用HTML+CSS来实现，代码如下：
[code=html][<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div
{ min-width:600px; min-height:300px;
position:absolute; padding:10px;
text-align:center;
border:1px solid;
}
</style>
</head>
<body>
<div><img src="800600.jpg" alt="" /></div>
</body>
</html>
/code]
#5
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div
{ min-width:600px; min-height:300px;
position:absolute; padding:10px;
text-align:center;
border:1px solid;
}
</style>
</head>
<body>
<div><img src="800600.jpg" alt="" /></div>
</body>
</html>
#6
要缩小图像适应DIV也是可以只使用HTML=CSS的，只是不兼容IE6。例子如下：
更换宽度大于或小于DIV的图像即可看到效果。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div
{ width:650px;
padding:10px;
text-align:center;
border:1px solid;
}
img{ max-width:100%; max-height:100%; }
</style>
</head>
<body>
<div><img src="500400.jpg" alt="" /></div>
</body>
</html>
更换宽度大于或小于DIV的图像即可看到效果。
#7
用JS自动缩放功能
#8
你试试3楼的，就是不知道是不是你要的效果
#9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>未知大小的圖片在一個已知大小容器中的水平和垂直居中兼容IE-Firefox-Chrome</title>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<style type="text/css">
<!--
ul#FgWrap{width: 936px;margin: 0 auto;list-style: none;padding-top: 2em;}
ul#FgWrap li{float: left; margin: 0 10px 10px 0;background: #EEE}
.boxinner{
height:160px;
width:200px;
border: solid 1px #666;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.boxinner img {margin:0 auto;border: 4px solid #FFF;}
-->
</style>
<style type="text/css">
/* vertical align for IE */
.edge {width:0; height:100%; display:inline-block; vertical-align:middle;}
.container {text-align:center; width:100%; display:inline-block; vertical-align:middle;line-height:80%;}
/*加上line-height:80%消除IE-Firefox-Chrome三瀏覽器圖片下方多出的空白,使四邊空白闊度大小一樣*/
</style>
</head>
<body>
未知大小的圖片在一個已知大小容器中的水平和垂直居中兼容IE6~10/Firefox1.5~10+/Chrome<br>
本例使用CSS幾乎可以強力解決樓主提出的問題,請樓主試試！！
提示：下面所有連接的圖片大小均為 1920px × 1200px
<div id="forestganMiddle">
<ul id="FgWrap">
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img alt="" src="http://res2.windows.microsoft.com/resbox/en/windows/main/821d81fe-4315-4124-8b50-641c6eab0822_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="40" alt="" width="65" src="http://res1.windows.microsoft.com/resbox/en/windows/main/ba2b271e-c7f7-4b50-8ecf-77b54d65b73e_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="108" alt="" width="162" src="http://res2.windows.microsoft.com/resbox/en/windows/main/31abccff-5c20-4244-8377-06591f164286_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img alt="" width="100" src="http://res2.windows.microsoft.com/resbox/en/windows/main/eaaf3bc9-95ef-43fe-9f48-2667bf646cd8_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="80" alt="" width="130" src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/a00672ac-6bac-4eda-bdca-985036f30e10_13.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="140" alt="" width="180" src="http://res1.windows.microsoft.com/resbox/en/windows%207/main/abba3f36-8021-423c-99c8-759f33829d59_5.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="220" alt="" width="280" src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/39dcc240-86df-4e6e-94ea-d4fe4759eafa_31.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="180" alt="" width="230" src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/ab8825ee-520d-4147-beff-64b08115342e_5.jpg"
/></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img alt="" height="80" width="130" src="http://res1.windows.microsoft.com/resbox/en/windows%207/main/0c8013e4-0b98-4651-9d25-9e34704f3e4f_13.jpg" /></span></div>
</li>
</ul> </div></body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>未知大小的圖片在一個已知大小容器中的水平和垂直居中兼容IE-Firefox-Chrome</title>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<style type="text/css">
<!--
ul#FgWrap{width: 936px;margin: 0 auto;list-style: none;padding-top: 2em;}
ul#FgWrap li{float: left; margin: 0 10px 10px 0;background: #EEE}
.boxinner{
height:160px;
width:200px;
border: solid 1px #666;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.boxinner img {margin:0 auto;border: 4px solid #FFF;}
-->
</style>
<style type="text/css">
/* vertical align for IE */
.edge {width:0; height:100%; display:inline-block; vertical-align:middle;}
.container {text-align:center; width:100%; display:inline-block; vertical-align:middle;line-height:80%;}
/*加上line-height:80%消除IE-Firefox-Chrome三瀏覽器圖片下方多出的空白,使四邊空白闊度大小一樣*/
</style>
</head>
<body>
未知大小的圖片在一個已知大小容器中的水平和垂直居中兼容IE6~10/Firefox1.5~10+/Chrome<br>
本例使用CSS幾乎可以強力解決樓主提出的問題,請樓主試試！！
提示：下面所有連接的圖片大小均為 1920px × 1200px
<div id="forestganMiddle">
<ul id="FgWrap">
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img alt="" src="http://res2.windows.microsoft.com/resbox/en/windows/main/821d81fe-4315-4124-8b50-641c6eab0822_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="40" alt="" width="65" src="http://res1.windows.microsoft.com/resbox/en/windows/main/ba2b271e-c7f7-4b50-8ecf-77b54d65b73e_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="108" alt="" width="162" src="http://res2.windows.microsoft.com/resbox/en/windows/main/31abccff-5c20-4244-8377-06591f164286_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img alt="" width="100" src="http://res2.windows.microsoft.com/resbox/en/windows/main/eaaf3bc9-95ef-43fe-9f48-2667bf646cd8_7.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="80" alt="" width="130" src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/a00672ac-6bac-4eda-bdca-985036f30e10_13.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="140" alt="" width="180" src="http://res1.windows.microsoft.com/resbox/en/windows%207/main/abba3f36-8021-423c-99c8-759f33829d59_5.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="220" alt="" width="280" src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/39dcc240-86df-4e6e-94ea-d4fe4759eafa_31.jpg" /></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img height="180" alt="" width="230" src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/ab8825ee-520d-4147-beff-64b08115342e_5.jpg"
/></span></div>
</li>
<li>
<div class="boxinner"><span class="edge"></span><span class="container"><img alt="" height="80" width="130" src="http://res1.windows.microsoft.com/resbox/en/windows%207/main/0c8013e4-0b98-4651-9d25-9e34704f3e4f_13.jpg" /></span></div>
</li>
</ul> </div></body>
</html>