如何用DIV+CSS控制图片大小范围？ DIV+CSS，如何让图片自适应大小？
div+css\u5982\u4f55\u6539\u53d8\u80cc\u666f\u56fe\u7247\u5927\u5c0f\u4e3b\u8981\u6709\u4ee5\u4e0b\u51e0\u79cd\u65b9\u6cd5\uff1a
1-\u628a\u56fe\u7247\u653e\u5728div\u7684\u80cc\u666f\u56fe\u91cc\uff0c\u518d\u5229\u7528css3\u7684background-size\u5c5e\u6027\uff0c\u8bed\u6cd5\uff1a
background-size: length|percentage|cover|contain;\u8fd9\u4e2aCSS3\u7684\u5c5e\u6027\u4f5c\u7528\u662f\u628a\u80cc\u666f\u56fe\u50cf\u6269\u5c55\u81f3\u8db3\u591f\u5927\uff0c\u4ee5\u4f7f\u80cc\u666f\u56fe\u50cf\u5b8c\u5168\u8986\u76d6\u80cc\u666f\u533a\u57df\uff0c\u80cc\u666f\u56fe\u50cf\u7684\u67d0\u4e9b\u90e8\u5206\u4e5f\u8bb8\u65e0\u6cd5\u663e\u793a\u5728\u80cc\u666f\u5b9a\u4f4d\u533a\u57df\u4e2d\uff0c\u5982\u679c\u4e0d\u4f7f\u7528\u8fd9\u4e2a\u5c5e\u6027\uff0c\u5728IE11\u548cFireFox\u4e2d\u7f29\u653e\u6d4f\u89c8\u5668\uff0c\u80cc\u666f\u56fe\u7247\u4f1a\u968f\u4e4b\u7f29\u5c0f\uff0c\u540c\u65f6\u4f7f\u7528-webkit-background-size: cover\u548c-o-background-size: cover\u517c\u5bb9webkit\u5185\u6838\u6d4f\u89c8\u5668\u548cOpera\u6d4f\u89c8\u5668\uff1bbackground-attachment\u5c5e\u6027\u8bbe\u7f6e\u80cc\u666f\u56fe\u50cf\u662f\u5426\u56fa\u5b9a\u6216\u8005\u968f\u7740\u9875\u9762\u7684\u5176\u4f59\u90e8\u5206\u6eda\u52a8\uff0c\u5f53\u8bbe\u7f6e\u4e3afixed\u65f6\u9875\u9762\u7684\u5176\u4f59\u90e8\u5206\u6eda\u52a8\u65f6\uff0c\u80cc\u666f\u56fe\u50cf\u4e0d\u4f1a\u79fb\u52a8\u3002
2-\u5982\u679c\u662f\u6709\u89c4\u5f8b\u53d8\u5316\u7684\u56fe\uff0c\u53ef\u4ee5\u5c06\u56fe\u7247\u5355\u72ec\u5207\u51fa\u6765\uff0c\u7136\u540erepeat-x\u6216\u8005repeat-y\u8fdb\u884c\u5e73\u94fa\uff0c\u4e5f\u662f\u4e00\u4e2a\u4e0d\u9519\u7684\u65b9\u6cd5\uff0c\u800c\u4e14\u56fe\u7247\u53ef\u4ee5\u5207\u5f97\u4e0d\u7528\u90a3\u4e48\u5927\uff0c\u4e5f\u5bf9\u56fe\u7247\u8fdb\u884c\u5145\u5206\u5229\u7528\u3002
3-\u5c06\u56fe\u7247\u5199\u5728img\u6807\u7b7e\u91cc\uff0c\u7136\u540e\u5bf9\u56fe\u7247\u548cdiv\u8fdb\u884c\u76f8\u5bf9\u5b9a\u4f4d/\u7edd\u5bf9\u5b9a\u4f4d\uff0c\u6548\u679c\u662f\u56fe\u7247\u5c3a\u5bf8\u4e0d\u4f1a\u968f\u6d4f\u89c8\u5668\u7f29\u653e\u800c\u53d8\u5316\uff0c\u4f46\u662f\u5982\u679c\u6709\u7ad6\u76f4\u6eda\u52a8\u6761\u65f6\uff0c\u56fe\u7247\u4e0d\u4f1a\u56fa\u5b9a\u800c\u4f1a\u968f\u6eda\u52a8\u6761\u79fb\u52a8\u3002\u53ea\u9700\u8981\u628a\u56fe\u7247\u7684\u5bbd\u5ea6width\u8bbe\u7f6e\u6210100%\u5c31\u884c\u4e86\u3002
JS
function reSizeImg(obj,reWidth){
if(obj.readyState=="complete")
{
var imgWidth=obj.offsetWidth;
var imgHeight=obj.offsetHeight;
if(imgWidth>reWidth)
{
p=imgWidth/reWidth;
cHeight=Math.floor(imgHeight/p);
obj.width=reWidth;
obj.height=cHeight;
}
}
}
//\u8c03\u7528
使用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">
代码如下：
<style type="text/css">
<!--
#tt {
background-color:#FF0000;
margin: auto;
width: 100%;
height:400px;
}
#tt .img {
width:1920px;
}
-->
</style>
一、网页制作技巧实例解决：用CSS控制图片自适应大小
图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用CSS控制图片使它自适应大小呢？
我们想到了一个比较简单的解决方法，虽然不是非常的完美，如果您的要求不是非常高，已经可以满足你的需要了。我们看下面的代码：
div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
◎ width:600px; 在所有浏览器中图片的大小为600px;
◎ 当图片大小大于600px，自动缩小为600px。在IE6中有效。
◎ overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。
二、有时候图片太大，会破环网页整齐的布局。这时可以用css来强制按比例压缩图片的高度或宽度
css代码如下：
img,a img{
border:0;
margin:0;
padding:0;
max-width:590px;
width:expression(this.width>590?"590px":this.width);
max-height:590px;
height:expression(this.height>590?"590px":this.height);
}这样当图片的高度或宽度若超过590px，将会按比例压缩成590px，如果不超过则按原大小显示。
原文地址：网页链接
DIV+CSS不能够完成这个功能，要用JS控制，进行等比例缩放。
给你2个方法好了
第一个比较简单，就是把img的尺寸都设为100%，例如<div style="width:200px; height:100px;"><img src="images/bg.jpg" width="100%" height="100%" /></div>这样不管图片原始尺寸是多少，都会被限制在这个范围之内，不过这个方法有很大的局限性，必须要求图片的高宽比例与div的高宽比例一样，这样图片才不会变形
第二个方法那就是比较常用的，就是调用js来控制，给你一个链接，你自己看着弄吧
绛旓細1銆CSS 涓鎺у埗鏄剧ず鐨鍥剧墖澶у皬锛屽彲浠ョ洿鎺ュ畾涔夊湪CSS涓畾涔夊浘鐗囧搴idth鍜岄珮搴eight銆傛瘮濡傦細<style> .pic img{width:40px;height:40px;} /*杩欓噷鐩存帴瀹氫箟浜唒ic鐨勫浘鐗囧搴﹀拰楂樺害*/ </style> <div class="pic"><img src="鍥剧墖.JPG"></div> 2銆佸湪缃戦〉涓氳繃html浠ｇ爜鐩存帴鍐欏浘鐗囩殑瀹藉害鍜岄珮搴︺傛瘮濡...
绛旓細1-鎶鍥剧墖鏀惧湪div鐨勮儗鏅浘閲岋紝鍐鍒╃敤css3鐨刡ackground-size灞炴э紝璇硶锛歜ackground-size: length|percentage|cover|contain;杩欎釜CSS3鐨勫睘鎬т綔鐢ㄦ槸鎶婅儗鏅浘鍍忔墿灞曡嚦瓒冲澶э紝浠ヤ娇鑳屾櫙鍥惧儚瀹屽叏瑕嗙洊鑳屾櫙鍖哄煙锛岃儗鏅浘鍍忕殑鏌愪簺閮ㄥ垎涔熻鏃犳硶鏄剧ず鍦ㄨ儗鏅畾浣嶅尯鍩熶腑锛屽鏋滀笉浣跨敤杩欎釜灞炴э紝鍦↖E11鍜孎ireFox涓缉鏀炬祻瑙堝櫒锛岃儗...
绛旓細1.鐢╠w缂栬緫鍣ㄥ缓绔嬩簡涓涓潤鎬侀〉闈 2.灏嗗缓濂界殑闈欐侀〉鍛藉悕涓篶ss.html锛屾爣棰樹负浜嗏渃ss濡備綍璁剧疆鍥剧墖澶у皬鑷傚簲鈥3.鍦╞ody涓坊鍔犱袱涓div锛岃缃笉鑳界殑瀹藉害锛屽苟璁綾lass涓篸iv1鍜宒iv2锛岀洰鐨勬槸鐢ㄤ竴鏍风殑css鎺у埗鍥剧墖鐨勫搴﹀湪涓嶅悓鐨勫搴﹀鍣ㄤ腑閮借兘寰堝ソ鐨勬樉绀 4.鍦ㄤ袱涓猟iv鐨刢lass涓坊鍔犵浉鍚岀殑鎺у埗鍥剧墖鐨刢lass鍚嶄负...
绛旓細涓鑸儏鍐典笅鍙渶瑕佽缃ソ瀹藉害闄愬埗锛屾瘮濡傝繖閲屽彧璁剧疆鏈澶у搴︿负300px(max-width:300px),鐒跺悗瀵圭埗绾т娇鐢╫verflow:hidden闅愯棌婧㈠嚭鍥剧墖锛屽悓鏃朵负浜嗗吋瀹笽E6鎴戜滑璁剧疆涓獁idth:expression(this.width > 300 ? "300px" : this.width);瑙ｅ喅鍗冲彲銆1銆佸叿浣撹В鍐DIV+CSS瀹炰緥浠ｇ爜濡備笅锛<!DOCTYPE html> <html> <head> ...
绛旓細1銆侀鍏堥渶瑕佹柊寤轰竴涓狧TML椤甸潰銆2銆佺劧鍚庤緭鍏ラ〉闈㈢殑鏍囬锛屽彲浠ユ寜鐓т笅鏂瑰浘涓殑杩涜璁剧疆銆3銆佺劧鍚庡湪鏍规嵁涓嬫柟鍥剧墖涓殑浠ｇ爜杩涜缂栬緫锛4銆佸湪涓や釜div鐨刢lass 涓坊鍔犵浉鍚岀殑鎺у埗鍥剧墖鐨刢lass鍚嶄负浜 鈥漣mg鈥滐紝骞朵负div娣诲姞鎺у埗瀹藉害鐨勬牱寮忋5銆佸湪涓や釜div涓姞鍏ョ浉鍚岀殑鍥剧墖<img src="images/5.png" />锛屽湪娴忚鍣ㄦ墦寮...
绛旓細1銆侀〉闈㈠ぇ鐨勬椂鍊欏畠涔熷彉澶т絾鏄ぇ鍒板畠鏈韩鐨勫昂瀵哥殑鏃跺欙紝鍐嶆墿澶ч〉闈㈠畠灏变笉澶т簡锛佽缃渶澶у楂樹负鍥剧墖鐨勫楂榽锛佷唬鐮佸涓嬶細<div style="max-width:395px; max-width:744px"><img src="images/zs_img01.gif" style="width:100%; height:100%; " /></div> 2銆佷緥瀛愶細<div style="width:50%...
绛旓細鍙互閫氳繃cover鍜宑ontain鏉ュ鍥剧墖杩涜浼哥缉銆傝娉曪細background-size:auto;/* 榛樿鍊硷紝涓嶆敼鍙樿儗鏅浘鐗囩殑楂樺害鍜屽搴 */ background-size:100px 50px;/* 绗竴涓间负瀹斤紝绗簩涓间负楂橈紝褰撹缃竴涓兼椂锛屽皢鍏朵綔涓哄浘鐗囧搴︽潵绛夋瘮缂╂斁 */ background-size:10%;/* 0锛厏100锛呬箣闂寸殑浠讳綍鍊硷紝灏嗚儗鏅浘鐗囧...
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<style>鏍囩涓紝杈撳叆css浠ｇ爜锛歜ody {text-align: center;background: url(small2.png); background-size: 60%;} 3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵垚鍔熼氳繃css鎺у埗浜div灞呬腑鏄剧ず锛岃儗鏅鍥剧墖鐨勫ぇ灏忎负60%銆
绛旓細absolute锛涳綕锛屽彲浠鎺у埗div鏄剧ず鐨勪綅缃備綘杩樺彲浠ヨ缃诞鍔╠iv锝沠loat锛歭eft锛涳綕鎴栬呮槸div锝沠loat锛歳ight锛涳綕鏉ユ帶鍒禿iv灞呬腑鏄剧ず锛屽洜涓轰竴涓猟iv妗嗕腑濡傛灉璁剧疆娴姩鐨勮瘽鍙互宓屽涓や釜div妗嗭紙涓涓猯eft涓涓猺ight锛夛紝l涓嶈繃闇瑕佸祵濂楀涓猟iv妗嗭紙姣忎釜div鐨勫搴﹁嚜宸辫皟锛屾讳細璁ヾiv灞呬腑鐨勶級锛屼絾鏄繖涓柟娉曟瘮杈冩剼绗ㄣ
绛旓細if(obj.readyState=="complete"){ var imgWidth=obj.offsetWidth;var imgHeight=obj.offsetHeight;if(imgWidth>reWidth){ p=imgWidth/reWidth;cHeight=Math.floor(imgHeight/p);obj.width=reWidth;obj.height=cHeight;} } } </script> //璋冪敤 <img src="鍥剧墖鍦板潃" onload="reSizeImg(this,...
