如何编写html代码控制图片显示的大小？
具体操作步骤如下：
1、首先新建一个HTML页面，这里命名为“new_file.html”
2、接着给标签设置背景图片，例如设置的是<body>标签。
3、接着新建一个css文件，如图，命名为“1.css”
4、这里给body标签设置background-size属性，如果标签是div就写div，然后可以设置宽度和高度。
5、如图所示，在new_file.html里面写上这个：<link href="css/1.css" type="text/css" rel="stylesheet"/>就可以设置背景图片的大小了。
绛旓細01鎵撳紑璁颁簨鏈垨鍏朵粬浠ｇ爜缂栬緫鍣紝鍒涘缓涓涓柊鐨HTML鏂囦欢锛屽涓嬪浘鎵绀 02鐢ㄦ祻瑙堝櫒鎵撳紑杩欎釜HTML鏂囦欢锛屽彲浠ョ湅鍒颁笅鍥炬墍绀虹殑鏁堟灉銆傝繖骞呯敾鍦ㄦ暣椤电殑宸﹁竟銆03鍥剧墖灞呬腑鍙互閫氳繃HTML涓殑align灞炴ф潵鎺у埗銆傚湪鍥剧墖鐨刣iv涓坊鍔燼lign="center"銆04鍦ㄦ祻瑙堝櫒涓啀娆℃墦寮杩欎釜椤甸潰鏂囦欢锛屾晥鏋滃涓嬨傚浘鐗囧凡缁忔樉绀哄湪涓棿銆05鎴戜滑杩...
绛旓細鍙互鐢ㄢ渨idth鈥濆拰鈥渉eight鈥濆睘鎬ф帶鍒跺浘鐗囩殑鏄剧ず澶у皬銆1銆佹柊寤篽tml鏂囦欢锛屽湪body鏍囩涓坊鍔爄mg鏍囩锛屼负img鏍囩璁剧疆鈥渟rc鈥濆睘鎬э紝灞炴у间负鍥剧墖鐨勫湴鍧锛岃繖鏃跺浘鐗囩殑鏄剧ず澶у皬鏄浘鐗囪嚜韬殑澶у皬锛2銆佷负img鏍囩鍗曠嫭璁剧疆鈥渨idth鈥濇垨鈥渉eight鈥濆睘鎬э紝灞炴у间负瀹藉害鎴栬呴珮搴︼紝杩欐椂鍥剧墖鐨勫搴﹀皢鍙樻垚璁剧疆鐨勫搴︼紝楂樺害灏嗕細鎸...
绛旓細鎵撳紑浣犵殑HTML缂栬緫鍣紝鏂板缓涓涓枃浠讹紝渚嬪鍛藉悕涓"index.html"锛岃繖鏄綘鐨勯」鐩熀纭鏂囦欢銆傛帴涓嬫潵锛岃繘鍏"index.html"鐨勬牱寮忛儴鍒嗭紝鍗硈tyle鏍囩銆傚湪杩欓噷锛屼綘鍙互缂栧啓CSS浠ｇ爜鏉鎺у埗鍥剧墖鐨勬樉绀恒備緥濡傦紝浣犲彲浠ヨ缃竴涓猟iv鍏冪礌鐨勬牱寮忥紝濡傦細杩欐浠ｇ爜瀹氫箟浜嗕竴涓72x72鍍忕礌鐨勫尯鍩燂紝鑳屾櫙鍥剧墖鏉ヨ嚜"small3.png"锛屽苟涓旇缃...
绛旓細1銆侀鍏堟柊寤轰竴涓HTML椤甸潰锛岃繖閲屽懡鍚嶄负鈥渘ew_file.html鈥2銆佹帴鐫缁欐爣绛捐缃儗鏅鍥剧墖锛屼緥濡傝缃殑鏄<body>鏍囩銆3銆佹帴鐫鏂板缓涓涓猚ss鏂囦欢锛屽鍥撅紝鍛藉悕涓衡1.css鈥4銆佽繖閲岀粰body鏍囩璁剧疆background-size灞炴э紝濡傛灉鏍囩鏄痙iv灏鍐div锛岀劧鍚庡彲浠ヨ缃搴﹀拰楂樺害銆5銆佸鍥炬墍绀猴紝鍦╪ew_file.html閲岄潰鍐欎笂杩欎釜锛<...
绛旓細鏌ユ壘绗竴涓<img 鏍囩鍙婁箣鍚庣殑绗竴涓>涓殑鍐呭 鍐嶆彁鍙杝rc=鍒扮涓涓┖鏍肩殑鍐呭灏辨槸浣犺鐨鍥剧墖鍦板潃,濡傛灉涓虹┖ 浣犵煡閬撶殑涓嶈繃涓鑸槸鍦ㄦ暟鎹簱鐨勮〃閲屽寤轰竴涓」,鍦ㄦ彁浜ゅ唴瀹圭殑鏃跺欏氨浼氬皢杩欎釜淇濆瓨鍒版暟鎹簱閲屻傝涓嶆病娆¤闂殑鏃跺欓兘鍋氫竴娆¤繍绠楀鍔犺礋鎷呫 杩介棶 鐪嬩笉鎳備綘璇寸殑鍟,濂芥繁濂,鐩存帴涓浠ｇ爜浣犵湅鐪<dd class="m"...
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html锛岃緭鍏ラ棶棰樺熀纭浠ｇ爜銆2銆佸湪index.html涓殑script>鏍囩涓紝杈撳叆js浠ｇ爜锛$('a').hover(function(){$('img').css('display','block');})3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃堕紶鏍囩Щ鍔ㄥ埌瓒呴摼鎺ヤ笂锛屼笅闈㈢殑鍥剧墖鑷姩鏄剧ず浜嗗嚭鏉ャ俢sshover鐢ㄦ硶锛熷湪...
绛旓細1銆侀鍏堟墦寮鐢佃剳涔嬪悗锛屽涓嬪浘鎵绀猴紝鏂板缓涓涓渃s鈥濇枃浠跺す锛屽湪鏂囦欢澶逛腑瀛樺偍涓寮鍥剧墖鐢ㄦ潵鍋氭紨绀恒2銆佹帴鐫鎵撳紑visual studio code鐐瑰嚮鈥滄枃浠垛-鈥滄墦寮鏂囦欢澶光濓紝閫変腑涓婁竴姝ュ缓绔嬪ソ鐨勨渃s鈥濇枃浠跺す銆3銆佺劧鍚庣偣鍑烩渃s鈥濆彸渚х殑鈥滄柊寤烘枃浠垛濆浘鏍囷紝鍒涘缓涓涓1.html鈥濇枃浠讹紝鍦ㄧ┖鐧絟tml鏂囦欢涓緭鍏ヤ竴涓嫳鏂団!鈥...
绛旓細姝ラ锛氫竴銆html鍥剧墖鏍囩璇硶 <img src="divcss-logo-201305.gif" width="165" height="60" /> img浠嬬粛锛歴rc 鍚庤窡鐨勬槸鍥剧墖璺緞鍦板潃width 璁剧疆鍥剧墖瀹藉害height 璁剧疆鍥剧墖楂樺害 浜屻佸叿浣揾tml 鍥剧墖鏄剧ず瀹炰緥 鍦html婧愪唬鐮涓垎鍒彃鍏ヤ笁寮犲浘鐗囷紝涓寮犲師濮嬪ぇ銆佷竴寮犲皢瀹藉害楂樺害鏀瑰皬灏忋佷竴寮犲皢瀹藉害楂樺害鏀瑰ぇ銆1銆...
绛旓細涓銆佷娇鐢ㄣ恑mg/銆戝厓绱犲紩鍏鍥剧墖 鍙互浣跨敤銆恑mg/銆戣繖涓厓绱犲紩鍏ュ浘鐗囷紝杩欐槸涓涓鍐呭厓绱狅紝浣嗘槸鍏锋湁琛屽唴鍧楃殑灞炴э紝鍙互鑷璁剧疆楂樺害鍜屽搴︺傘恑mg src="../image/bird.png"alt="楦熷浘"height="300"銆戙傚睘鎬ц鏄庯細1銆乻rc锛氶氳繃鍥剧墖瀛樻斁璺緞寮曞叆鍥剧墖锛屽叾鍊煎氨鏄浘鐗囩殑璺緞銆2銆乤lt锛氬彲缁欏浘鐗囪缃竴涓娉...
绛旓細鍥剧墖璺緞鏈夐棶棰 浣犲彧鏄寚鍚嶄簡鐩綍 鑰屾病鏈夋寚鍚嶅浘鐗囧悕绉 闄ら潪浣犵殑绔欑偣璁剧疆涓紝榛樿椤甸潰璁剧疆浜嗘煇寮犲浘鐗囧悕绉 姣斿浣犺缃甶ndex.jpg 閭ｄ綘鐨勮矾寰勭浉褰撲簬images/1/2/baidu/index.jpg 杩欐牱锛屼綘鐩存帴鍐鐩綍鍙互鏄剧ず鍥剧墖 鍚﹀垯锛屽繀椤绘寚鍚嶅浘鐗囩殑璺緞鍜屽浘鐗囧悕绉帮紒
