」;2、利用css的width和height屬性,語法「img {width:值;height:值}」。"/> 」;2、利用css的width和height屬性,語法「img {width:值;height:值}」。">

首頁  >  文章  >  web前端  >  html怎麼設定圖片大小

html怎麼設定圖片大小

青灯夜游
青灯夜游原創
2021-05-06 14:48:4934453瀏覽

方法:1.利用img標籤的width和height屬性,語法「html怎麼設定圖片大小」;2、利用css的width和height屬性,語法「img{width:值;height:值}」。

html怎麼設定圖片大小

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

方法1:利用img標籤的width和height屬性

html怎麼設定圖片大小 標籤的 height 和 width 屬性來設定圖片的尺寸。

<img  src="img/1.jpg"    style="max-width:90%"  style="max-width:90%"/ alt="html怎麼設定圖片大小" >

html怎麼設定圖片大小

為什麼要使用height 和width 屬性

您是否見過當文件載入時其內容會顯示不規則的移動。之所以會這樣,是因為瀏覽器為了能夠顯示每一個載入的圖像,而不斷地重新調整頁面的佈局。瀏覽器透過下載並解析出圖像的寬度和高度來決定圖像的大小,然後就會在顯示視窗中留出一個對應的矩形空間。然後瀏覽器就會調整頁面的顯示佈局,以便將圖像插入到顯示當中。這同時也告訴我們,圖像是獨立的文件,它與原始檔案都分別是獨立載入的。

但這不是最有效的顯示文件的方法,因為瀏覽器在顯示相鄰的文件內容以及後面的文件內容之前,必須檢查每一個圖像文件,併計算它們的螢幕空間。這可能會為文件的顯示帶來非常大的延遲,從而打斷使用者的閱讀。

對於創作者來說,一種更有效的方法是透過 html怎麼設定圖片大小 標籤的 height 和 width 屬性來指定映像的尺寸。這樣的話,瀏覽器在下載影像之前就為其預留了位置,從而可以加速文件的顯示,還可以避免文件內容的移動。這兩個屬性都要求是整數值,並以像素為單位來表示影像尺寸。這兩個屬性在 html怎麼設定圖片大小 標籤中出現的次序並不重要。

height 和width 屬性的問題

雖然html怎麼設定圖片大小 標籤的height 和width 屬性能夠改善效能並讓你實作一些小技巧,但在使用它們時還是有一些棘手的負面效果。即使使用者已經關掉了自動下載圖像的功能,瀏覽器還是要把為圖像預留的空間以指定的尺寸顯示出來。而這樣留給讀者的通常是一個空的框架,裡面有一個毫無意義的圖標,表示這是放置圖像的位置。這時頁面將看起來非常糟糕,就像根本沒有完成一樣,而且大部分內容都毫無用處。如果不使用這些指定的尺寸,則瀏覽器將只是在文字中放置一個圖像圖標,這樣顯示中至少還有一些文字可以閱讀。

推薦教學:《html影片教學

方法2:利用css的width和height屬性

width屬性設定元素的寬度,height屬性設定元素的高度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img{
				width:200px ;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<img  src="img/1.jpg"/ alt="html怎麼設定圖片大小" >
	</body>
</html>

html怎麼設定圖片大小

更多程式相關知識,請造訪:程式設計影片! !

以上是html怎麼設定圖片大小的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn