html如何设置图片大小 在html里，怎样把图片调成合适的大小？？
html\u5982\u4f55\u8bbe\u7f6e\u56fe\u7247\u5927\u5c0f\u64cd\u4f5c\u65b9\u6cd5\u5982\u4e0b\uff1a
1\u3001\u4ee5Hbuilder\u6765\u8bb2\u89e3\uff0c\u9996\u5148\u65b0\u5efa\u4e00\u4e2aHTML\u9875\u9762\uff0c\u5982\u56fe\uff1b
2\u3001\u63a5\u7740\u7ed9\u6807\u7b7e\u8bbe\u7f6e\u80cc\u666f\u56fe\u7247\uff0c\u5982\u56fe\u8bbe\u7f6e\u7684\u662f\u6807\u7b7e\uff1b
3\u3001\u7136\u540e\u65b0\u5efa\u4e00\u4e2acss\u6587\u4ef6\uff0c\u5982\u56fe\uff1b
4\u3001\u8fd9\u91cc\u7ed9body\u6807\u7b7e\u8bbe\u7f6ebackground-size\u5c5e\u6027\uff0c\u5982\u679c\u6807\u7b7e\u662fdiv\u5c31\u5199div\uff0c\u7136\u540e\u53ef\u4ee5\u8bbe\u7f6e\u5bbd\u5ea6\u548c\u9ad8\u5ea6\uff1b
5\u3001\u5982\u56fe\u6240\u793a\uff0c\u5728new_file.html\u91cc\u9762\u7f16\u8f91\uff1a\uff0c\u5c31\u53ef\u4ee5\u8bbe\u7f6e\u80cc\u666f\u56fe\u7247\u7684\u5927\u5c0f\u4e86\uff1b
6\u3001\u6700\u540e\u5728\u6d4f\u89c8\u5668\u4e2d\u9884\u89c8\u4e00\u4e0b\uff0c\u5982\u56fe\u4e3a\u90e8\u5206\u80cc\u666f\u3002
\u6269\u5c55\u8d44\u6599\uff1a
\u5982\u4f55\u5728htlm\u4e2d\u63d2\u5165\u56fe\u7247\uff1a
1\u3001\u7528dw\u521b\u5efa\u4e00\u4e2a\u7f51\u9875\u6587\u6863\uff0c\u4f1a\u81ea\u52a8\u5199\u5165\u8fd9\u4e9b\u4ee3\u7801\u3002\u6211\u7528\u7684\u662fDW\u8f6f\u4ef6\uff1b
2\u3001\u5728\u4e2d\u95f4\u5199\u5165<img src \u540e\u4f1a\u81ea\u52a8\u6709\u4e00\u4e2a\u201c\u6d4f\u89c8\u201d\uff1b
3\u3001\u5728\u4e0b\u4e00\u6b65\u4e4b\u524d\u8981\u8fdb\u884c\u4fdd\u5b58\uff0cctrl+s\u8fdb\u884c\u4fdd\u5b58\uff1b
4\u3001\u70b9\u51fb\u201c\u6d4f\u89c8\u201d\u540e\uff0c\u9009\u62e9\u56fe\u7247\u7684\u6765\u6e90\u8def\u5f84\uff1b
5\u3001\u6700\u540e\u5728\u952e\u76d8\u4e0a\u6572\u6253"</"\u5c31\u884c\u4e86\uff0c\u56fe\u7247\u5c31\u63d2\u5165\u4e86\u3002
1\u3001\u9996\u5148\u6253\u5f00hbuilder\u7f16\u8f91\u5668\uff0c\u65b0\u5efa\u4e00\u4e2ahtml\u6587\u4ef6\uff0c\u91cc\u9762\u8bbe\u7f6e\u4e00\u4e2adiv\u6807\u7b7e\u5e76\u8bbe\u7f6ediv\u7684\u56fa\u5b9a\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u3002
2\u3001\u7136\u540e\u5728div\u91cc\u9762\u63d2\u5165\u4e00\u5f20\u56fe\u7247\uff0c\u5c06\u56fe\u7247\u7684\u5bbd\u5ea6\u8bbe\u7f6e\u4e3a\u4f55\u7236\u7ea7\u4e00\u6837\u7684\u5bbd\u5ea6\uff0c\u4ee3\u7801\u5c31\u662fwidth:100%;\u8fd9\u91cc\u7684100%\u4f1a\u81ea\u52a8\u8ddf\u968f\u7236\u7ea7\u7684\u5bbd\u5ea6\u3002
3\u3001\u63a5\u7740\u5c06\u7236\u7ea7\u7684\u9ad8\u5ea6\u53bb\u6389\uff0c\u8fd9\u6837\u7236div\u4e2d\u7684img\u7684\u9ad8\u5ea6\u5c31\u80fd\u81ea\u52a8\u5316\uff0c\u8fd8\u8981\u5c06\u5c06\u56fe\u7247\u8bbe\u7f6e\u4e3a\u201cdisplay:block;\u201d\u8f6c\u4e3a\u5757\u72b6\u5c31\u53ef\u4ee5\u4e86\u3002
4\u3001\u6700\u540e\u6253\u5f00\u6d4f\u89c8\u5668\u5c31\u80fd\u770b\u5230\u4e00\u4e2a\u94fa\u6ee1\u6574\u4e2adiv\u7684\u56fe\u7247\u4e86\u3002
<img src="" style="width:180px;height:100px"/>
方法二：通过调用样式
<style type="text/css">
.srcImg{width:180px;height:100px;}
</style>
<img src="" class="srcImg"/>
如果图片img外容器有设置宽度的话；可以设置为width:100%;
<img src="" style="width:几%">
绛旓細浠ョ‘淇濇枃鏈湪涓嶅悓璁惧涓婇兘鑳介傚簲鍥剧墖澶у皬銆備緥濡傦細```css media screen and (max-width: 768px) { div { background-size: 100% 100%;} } ```鍦ㄨ繖涓緥瀛愪腑锛屽綋灞忓箷瀹藉害灏忎簬768鍍忕礌鏃讹紝鎴戜滑灏哷background-size`灞炴х殑鍊璁剧疆涓篳100% 100%`锛岃繖鏍峰浘鐗囦細绛夋瘮缂╂斁锛屽苟鍦ㄥ搴︿笂鑷傚簲灞忓箷澶у皬銆
绛旓細鍙互浣跨敤html鐨刡ackground-image鏍囩鍜宐ackground-size瀹炵幇鎻掑叆鑳屾櫙鍥剧墖鍜屾帶鍒鍥剧墖澶у皬銆傚叿浣撴楠ゅ涓嬶細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏄細鐢佃剳銆佹祻瑙堝櫒銆乽ltraedit銆1銆佸湪ue缂栬緫鍣ㄤ腑鏂板缓涓涓┖鐧界殑html鏂囦欢銆2銆佸湪ue缂栬緫鍣ㄤ腑杈撳叆浠ヤ笅html浠ｇ爜銆3銆佺紪杈戝畬鎴愪互鍚庯紝鍦╱e缂栬緫鍣ㄤ腑鐐瑰嚮淇濆瓨锛屾牸寮忛夋嫨UTF8鏃燘OM銆4銆佸湪娴忚鍣...
绛旓細<p><strong>閫氳繃CSS鏀瑰彉璁剧疆鍥剧墖澶у皬</strong></p> <div class="divcss5"> <img src="divcss5-logo-201305.gif"><br> 杩欓噷璁剧疆divcss5鐩掑瓙閲屽浘鐗囧搴300px楂樺害100px </div> </body> </html> 涓ゅ浣跨敤鍥剧墖涓哄悓涓寮犲浘鐗囷紝浠ヤ究瑙傚療鏁堟灉銆3銆佸浘鐗囧ぇ灏忚缃疄渚嬫埅鍥 浠庝笂鍥炬垜浠兘鐪嬪嚭...
绛旓細鎺ョ潃鏂板缓涓涓猚ss鏂囦欢锛屽鍥撅紝灏忕紪鍛藉悕涓衡1.css鈥濄傝繖閲岀粰body鏍囩璁剧疆background-size灞炴э紝濡傛灉浣犵殑鏍囩鏄痙iv灏卞啓div锛岀劧鍚庡彲浠ヨ缃搴﹀拰楂樺害銆傚鍥炬墍绀猴紝鍦╪ew_file.html閲岄潰鍐欎笂杩欎釜锛<link href="css/1.css" type="text/css" rel="stylesheet"/>灏卞彲浠ヨ缃儗鏅鍥剧墖鐨澶у皬浜嗐傛渶鍚庡湪娴忚鍣ㄤ腑...
绛旓細html濡備綍璁捐鑳屾櫙鍥剧墖澶у皬銆傚ぇ灏忓啓瀛椾綋銆佸皬鍐欏瓧浣撶殑澶у皬鍐欏搴旂殑鍥剧墖鏂囦欢锛屽湪鍒朵綔涓紝鎴戜滑涓鑸湪ppt涓繘琛屽ぇ灏忓啓璋冭瘯銆備竴鏂归潰鏄负浜嗘帶鍒堕〉闈㈢殑澶у皬鍐欙紝涓鏂归潰鏄负浜嗛伩鍏嶈繃瀹斤紝鑰屽浜庡浘鐗囩殑鍥惧儚鏂囦欢锛屽ぇ灏忓啓鍙互鎺у埗鍦120锛岃繖鏍峰彲浠ヨ鏁翠釜椤甸潰鐨勫ぇ灏忓啓鎺у埗鍦120宸﹀彸銆傚湪鎴戜滑鎵撳紑ppt鏃讹紝鎴戜滑瑕佹敞鎰忕殑鏄紝涓嶅疁鍦...
绛旓細浣html涓璬iv鍐呯殑鍥剧墖闅忓睆骞曞ぇ灏忚皟鑺傜殑鎿嶄綔鏂规硶涓猴紝灏哾iv涓巌mg鐨勫搴﹂兘璁剧疆涓100%锛屼唬鐮佸涓嬶細<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>鍥剧墖澶у皬鑷傚簲</title...
绛旓細鍏蜂綋姝ラ濡備笅锛1銆侀鍏堬紝鍏堝湪浠ｇ爜涓緭鍏osition:fixed; top: 0; left: 0;杩欐牱鐨勪綔鐢ㄦ槸璁╂暣涓鍥剧墖鍥哄畾鍦ㄥ睆骞曚笂銆2銆佷箣鍚庯紝鍐嶆妸鑳屾櫙鍥剧墖鐨澶у皬鑷姩閫傚簲DIV澶у皬锛屽綋鍥剧墖鑷姩閫傚簲鏃讹紝鏃㈠彲浠ュ氨杩涜缂╂斁銆3銆佽緭鍏ackground-size: cover;-webkit-background-size: cover;-o-background-size: cover;浣...
绛旓細html鏇存敼鍥剧墖婊氬姩鐨鍥剧墖澶у皬锛屽彲浠ラ氳繃js涓嶆柇鐨勬洿鏀瑰浘鐗囩殑灏哄鏉ュ疄鐜帮紝瀹炰緥濡備笅锛<div id="Demo_t0" style="overflow:hidden;width:730;height:182;"> <table width=" 0" height="136" border=0 align=center cellpadding=0 cellspacing="0" cellspace=0> <tr> <td align="center" v...
绛旓細html鍥剧墖鎸夊睆骞澶у皬绛夋瘮渚嬬缉鏀捐嫢娴忚鍣ㄥ厑璁稿彲鎸塁trl+榧犳爣婊氳疆婊戝姩缂╂斁锛屾垨鐢ㄤ唬鐮併傚叿浣撴柟娉曞涓嬶細Ctrl+榧犳爣婊氳疆婊戝姩缂╂斁 css浠ｇ爜涓巋tlm浠ｇ爜 CSS 浠ｇ爜濡備笅锛歜ackground { position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background-color: #211f1f;display:none\8;} ba...
绛旓細濡傛灉閫氳繃css璁剧疆鑳屾櫙鍥撅紝閭ｄ箞鍥剧墖灏哄瑕佽冻澶熷ぇ锛岀洰鍓嶅ぇ瀹藉睆1920宸﹀彸锛屾墍浠ュ搴︽渶濂借缃负1920锛岀劧鍚庡眳涓紱濡傛灉閫氳繃div宓屽叆鍥剧墖锛岄偅涔堝皢姝iv璁剧疆鎴愮粷瀵瑰畾浣嶏紝z-index锛-1銆備竾缁寸綉涓婄殑涓涓秴濯掍綋鏂囨。绉颁箣涓轰竴涓〉闈紙澶栬锛歱age锛夈備綔涓轰竴涓粍缁囨垨鑰呬釜浜哄湪涓囩淮缃戜笂鏀剧疆寮濮嬬偣鐨勯〉闈㈢О涓轰富椤碉紙澶栬锛欻omepage...
