如何用DIV+CSS控制图片大小范围？
使用CSS max-width和max-height实现图片自动等比例缩小
很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度，这样图片就会等比例缩放图片，然图片相对不变形清晰。
使用max-width:300px或max-height:100px，即可解决图片比例缩小。但这样存在一个问题，如果按照宽度缩放，但图片过高会超出溢出盒子，这个时候需要对父级使用overflow:hidden隐藏超出图片内容。但是使用max-width或max-height，IE6不支持，我们需要设置个width:expression(this.width > 300 ? "300px" : this.width);或者height:expression(this.height>100?"100px":this.height);。
解决IE6支持max-height
div css解决IE6支持max-width
一般情况下只需要设置好宽度限制，比如这里只设置最大宽度为300px(max-width:300px),然后对父级使用overflow:hidden隐藏溢出图片，同时为了兼容IE6我们设置个width:expression(this.width > 300 ? "300px" : this.width);解决即可。
1、具体解决DIV+CSS实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片缩小不变形实例 www.divcss5.com</title>
<style>
.divcss5{ border:1px solid #000; width:300px; height:100px;overflow:hidden}
.divcss5 img{max-width:300px;_width:expression(this.width > 300 ? "300px" : this.width);}
</style>
</head>
<body>
<div class="divcss5">
绛旓細棣栧厛鐢╠w缂栬緫鍣ㄥ缓绔嬩簡涓涓潤鎬侀〉闈 灏嗗缓濂界殑闈欐侀〉鍛藉悕涓篶ss.html锛屾爣棰樹负浜嗏渃ss濡備綍璁剧疆鍥剧墖澶у皬鑷傚簲鈥濆湪body涓坊鍔犱袱涓div锛岃缃笉鑳界殑瀹藉害锛屽苟璁綾lass涓篸iv1鍜宒iv2锛岀洰鐨勬槸鐢ㄤ竴鏍风殑css鎺у埗鍥剧墖鐨勫搴﹀湪涓嶅悓鐨勫搴﹀鍣ㄤ腑閮借兘寰堝ソ鐨勬樉绀 鍦ㄤ袱涓猟iv鐨刢lass涓坊鍔犵浉鍚岀殑鎺у埗鍥剧墖鐨刢lass鍚嶄负浜嗏漣mg鈥...
绛旓細background-size:200px 100px; 瀹介珮鑷繁瀹 濡傛灉璁鍥剧墖鎴愭瘮渚嬫斁澶э紝鍙互浣跨敤鐧惧垎姣旓紝濡 background-size:110%;
绛旓細div鐨勬樉绀烘槸涓灞備竴灞傚線涓嬫樉绀猴紝濡傛灉浣犺灏哾iv涓殑鍐呭灞呬腑鏄剧ず锛屾病璁伴敊鐨勮瘽锛屽彲浠鐢╠iv锝泃ext-align锛歝enter锛涳綕锛屽鏋滀綘瑕佸皢div灞呬腑锛屽彲浠ラ氳繃璁剧疆鐩稿鎴栬呮槸缁濆浣嶇疆锛岃繖鏄缃粷瀵逛綅缃細div锝沴eft锛100px锛泃op锛0px锛沺osition锛歛bsolute锛涳綕锛屽彲浠鎺у埗div鏄剧ず鐨勪綅缃備綘杩樺彲浠ヨ缃诞鍔╠iv锝沠loat锛歭eft...
绛旓細鍙互閫氳繃cover鍜宑ontain鏉ュ鍥剧墖杩涜浼哥缉銆傝娉曪細background-size:auto;/* 榛樿鍊硷紝涓嶆敼鍙樿儗鏅浘鐗囩殑楂樺害鍜屽搴 */ background-size:100px 50px;/* 绗竴涓间负瀹斤紝绗簩涓间负楂橈紝褰撹缃竴涓兼椂锛屽皢鍏朵綔涓哄浘鐗囧搴︽潵绛夋瘮缂╂斁 */ background-size:10%;/* 0锛厏100锛呬箣闂寸殑浠讳綍鍊硷紝灏嗚儗鏅浘鐗囧...
绛旓細<div id="a1"> <div id="a2"> <img src="aa.JPG" width="100px" height="100px" /> 杩欓噷寰堝鏂囧瓧銆</div> </div> 杩欐牱灏卞彲浠,浣嗘槸濡傛灉鍥剧墖灏忎簬100*100px, 涔熶細琚媺浼稿埌100*100px.
绛旓細鍙互瀹炵幇銆傚亣璁句綘鐨鍥剧墖澶у皬涓100x100px HTML涓猴細<div class="imgbox"><img src="浣犵殑鍥剧墖璺緞" /></div> CSS涓猴細.imgbox { height:50px;/*鍥剧墖澶у皬鐨勪竴鍗*/ width:100px; position:relative; overflow:hidden;} .imgbox img { width:100px; height:100px; position:absolute; top:-50px;...
绛旓細.imgDiv{ width:500px;height:500px;background-image:url('../images/index.jpg');-moz-background-size: 100% 100%;-o-background-size: 100% 100%;-webkit-background-size: 100% 100%;background-size: 100% 100%;-moz-border-image: url(./btn.png) 0;background-repeat:no-repeat...
绛旓細<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鏃犳爣棰樻枃妗</title> <style> div1 img{ width:200px; height:67px;} div2 img{ width:137px; height:46px;} </style> </head> <body> <...
绛旓細鎷変几鏄彲浠ュ仛鐨,闇瑕佺敤鍒板彟澶栦竴涓睘鎬:css涓缃儗鏅浘鎷変几濉厖锛屽湪css2.1涔嬪墠杩欎釜鑳屾櫙鐨勯暱瀹藉兼槸涓嶈兘琚慨鏀圭殑銆 瀹為檯鐨勭粨鏋滄槸鍙兘閲嶅鏄剧ず锛屽彲浠ヤ娇鐢╮epeat,repeat-x,repeat-y,no-repeat杩欎簺灞炴ф潵鎺у埗鑳屾櫙鍥剧墖鐨勬樉绀恒傛墍浠ヤ竴鑸敤浣滆儗鏅浘鐗囩殑鏈2绫伙細1.鏄竴鏁村紶澶у浘锛屽昂瀵稿拰鍖哄煙澶у皬鍒氬ソ鍚诲悎 2.涓涓...
绛旓細楂樺害涓嶉傚簲鏄綋鍐呭眰瀵硅薄鐨勯珮搴﹀彂鐢熷彉鍖栨椂澶栧眰楂樺害涓嶈兘鑷姩杩涜璋冭妭,鐗瑰埆鏄綋鍐呭眰瀵硅薄浣跨敤margin 鎴杙addign 鏃躲 渚:#box #box p <div id="box"> <p>p瀵硅薄涓殑鍐呭</p></div> 瑙ｅ喅鏂规硶:鍦≒瀵硅薄涓婁笅鍚勫姞2涓┖鐨刣iv瀵硅薄CSS浠ｇ爜:.1鎴栬呬负DIV鍔犱笂border灞炴с 12銆/***IE6涓嬩负浠涔鍥剧墖涓嬫湁绌洪殭浜х敓**...
