html里图片怎么改大小
1、直接添加宽高属性：
<img src="" width="200" height="200">
2、在样式表中定义：
img {height:200px;width:200px;}
这样的弊端是如果图片比例不等就会出现图片拉伸，要么改图片或限制图片最大宽/高度，后者建议使用js解决。
3、指定div里背景图大小的方法如下：
div{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;}
扩展资料
html中图片height 和 width 属性的使用技巧：
height 和 width 属性有一种隐藏的特性，就是人们无需指定图像的实际大小，也就是说，这两个值可以比实际的尺寸大一些或小一些。浏览器会自动调整图像，使其适应这个预留空间的大小。使用这种方法就可以很容易地为大图像创建其缩略图，以及放大很小的图像。
但需要注意的是：浏览器还是必须要下载整个文件，不管它最终显示的尺寸到底是多大，而且，如果没有保持其原来的宽度和高度比例，图像会发生扭曲。
使用 height 和 width 属性的另外一种技巧，是可以非常容易地实现对页面区域的填充，同时还可以改善文档的性能。
设想一下，如果你想在文档中放置一个彩色的横条。您不需要创建一个具有完整尺寸的图像，相反，您只要创建一个宽度和高度都为 1 个像素的图像，并把自己希望使用的颜色赋给它。然后使用 height 和 width 属性把它扩展到更大的尺寸。
参考资料：百度百科-HTML
绛旓細1銆佹墦寮html銆2銆佷娇鐢ㄦ爣绛句笂鐨刪eight鍜寃idth鐨勫睘鎬mg锛屽嵆鍙皟鏁鍥剧墖澶у皬涓哄師鏉ョ殑鐧惧垎涔60銆HTML鐨鍏ㄧО涓鸿秴鏂囨湰鏍囪璇█锛屾槸涓绉嶆爣璁拌瑷銆
绛旓細鍙互鐢╟ss3涓鈥渢ransform: scale()鈥濆睘鎬у鍥剧墖杩涜缂╂斁銆1銆佹柊寤html鏂囨。锛屽湪body鏍囩涓坊鍔犱竴寮犲浘鐗囷紝缁欒繖寮犲浘鐗囪缃甤ss灞炴э紝娣诲姞鈥渢ansform鈥濈缉鏀惧睘鎬э紝灞炴у间负鈥渟caleX(n)鈥濓紝scaleX(n)鎸鐨鏄瀹藉害杩涜缂╂斁锛宯鎸囩殑鏄缉鏀炬瘮渚嬶細2銆佸皢transform鐨勫睘鎬у兼敼涓衡渟caleY(n)鈥濓紝scaleY(n)鎸囩殑鏄...
绛旓細鍙互浣跨敤html鐨background-image鏍囩鍜宐ackground-size瀹炵幇鎻掑叆鑳屾櫙鍥剧墖鍜屾帶鍒鍥剧墖澶у皬銆傚叿浣撴楠ゅ涓嬶細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏄細鐢佃剳銆佹祻瑙堝櫒銆乽ltraedit銆1銆佸湪ue缂栬緫鍣ㄤ腑鏂板缓涓涓┖鐧界殑html鏂囦欢銆2銆佸湪ue缂栬緫鍣ㄤ腑杈撳叆浠ヤ笅html浠ｇ爜銆3銆佺紪杈戝畬鎴愪互鍚庯紝鍦╱e缂栬緫鍣ㄤ腑鐐瑰嚮淇濆瓨锛屾牸寮忛夋嫨UTF8鏃燘OM銆4銆佸湪娴忚鍣...
绛旓細鐩存帴缁檌mg璁剧疆瀹藉害 <img src="" width="100px">
绛旓細CSS閲岃缃繖涓や釜鍙傛暟锛氳儗鏅浘background: url(/*鍥剧墖璺緞*/) repeat-x/*骞抽摵鏂瑰紡*/;灏哄:backgroun-size:100% 100%銆傚叾瀹炲ぇ澶氭暟鐨凥TML缂栬緫鍣ㄦ搷浣滈兘鏄竴鏍风殑锛屼粖澶╂垜灏变互Hbuilder鏉ヨ瑙ｏ紝棣栧厛鏂板缓涓涓狧TML椤甸潰锛岃繖閲屽懡鍚嶄负鈥渘ew_file.html鈥濄傛帴鐫缁欐爣绛捐缃儗鏅浘鐗囷紝杩欓噷灏忕紪璁剧疆鐨勬槸<body>鏍囩...
绛旓細寰堝绉嶆柟寮忔潵瑙ｅ喅锛1銆佷綘鍙互鍥哄畾涓涓鍥剧墖鐨勫ぇ灏濡傦細<img src="鍥剧墖鍦板潃" width="鍥剧墖瀹藉害" height="鍥剧墖楂樺害" /> 2銆佷綘鍙互璁剧疆涓涓猟iv鍖哄煙锛屽width:50px; height:50px锛涜繖鏍蜂綘鎶奿mg鏀惧叆div鍖哄煙涓锛屽摢鎬曚綘璁剧疆鐨刬mg涓100%锛岄偅浠栦篃涓嶄細瓒呭嚭杩欎釜div鍖哄煙鐨勶紱濡傛灉杩樹笉鎳傦紝缁х画杩介棶鎴 ...
绛旓細<p><strong>閫氳繃CSS鏀瑰彉璁剧疆鍥剧墖澶у皬</strong></p> <div class="divcss5"> <img src="divcss5-logo-201305.gif"><br> 杩欓噷璁剧疆divcss5鐩掑瓙閲屽浘鐗瀹藉害300px楂樺害100px </div> </body> </html> 涓ゅ浣跨敤鍥剧墖涓哄悓涓寮犲浘鐗囷紝浠ヤ究瑙傚療鏁堟灉銆3銆佸浘鐗囧ぇ灏忚缃疄渚嬫埅鍥 浠庝笂鍥炬垜浠兘鐪嬪嚭...
绛旓細<img src="鍥剧墖閾炬帴鍦板潃" width=鈥滃搴︹ height="楂樺害"/>
绛旓細鐢╠iv璁剧疆瀹藉害100%楂樺害150px锛鍥剧墖璁剧疆涓鸿儗鏅紝鑳屾櫙鍥剧墖鍨傜洿灞呬腑锛岃儗鏅浘鐗囧搴100%楂樺害鑷傚簲鍥剧墖楂樺害銆備唬鐮佸氨鐪佺暐浜嗭紝鏈夊府鍔鐨璇濓紝鍒繕浜嗛噰绾炽
绛旓細鍏蜂綋姝ラ濡備笅锛1銆侀鍏堬紝鍏堝湪浠ｇ爜涓杈撳叆position:fixed; top: 0; left: 0;杩欐牱鐨勪綔鐢ㄦ槸璁╂暣涓浘鐗囧浐瀹氬湪灞忓箷涓娿2銆佷箣鍚庯紝鍐嶆妸鑳屾櫙鍥剧墖鐨勫ぇ灏鑷姩閫傚簲DIV澶у皬锛屽綋鍥剧墖鑷姩閫傚簲鏃讹紝鏃㈠彲浠ュ氨杩涜缂╂斁銆3銆佽緭鍏ackground-size: cover;-webkit-background-size: cover;-o-background-size: cover;浣...
