溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么在html中設(shè)置圖片大小

發(fā)布時(shí)間：2021-05-06 15:53:37 來源：億速云 閱讀：1163 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了怎么在html中設(shè)置圖片大小，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

html是什么

html的全稱為超文本標(biāo)記語言，它是一種標(biāo)記語言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。

方法1：利用img標(biāo)簽的width和height屬性

<img> 標(biāo)簽的 height 和 width 屬性設(shè)置圖像的尺寸。

<img src="img/1.jpg" width="200" height="200"/>

怎么在html中設(shè)置圖片大小

為什么要使用 height 和 width 屬性

您是否見過當(dāng)文檔加載時(shí)其內(nèi)容會(huì)顯示不規(guī)律的移動(dòng)。之所以會(huì)這樣，是因?yàn)闉g覽器為了能夠顯示每一個(gè)加載的圖像，而不斷地重新調(diào)整頁面的布局。瀏覽器通過下載并解析出圖像的寬度和高度來決定圖像的大小，然后就會(huì)在顯示窗口中留出一個(gè)相應(yīng)的矩形空間。然后瀏覽器就會(huì)調(diào)整頁面的顯示布局，以便把圖像插入到顯示當(dāng)中。這同時(shí)也告訴我們，圖像是獨(dú)立的文件，它與源文件都分別是獨(dú)立加載的。

但是這不是一種最有效的顯示文檔的方法，因?yàn)闉g覽器在顯示相鄰的以及后面的文檔內(nèi)容之前，必須要檢查每一個(gè)圖像文件，并計(jì)算它們的屏幕空間。這可能會(huì)給文檔的顯示帶來非常大的延遲，從而打斷用戶的閱讀。

對(duì)于創(chuàng)作者來說，一種更為有效的方法是通過 <img> 標(biāo)簽的 height 和 width 屬性來指定圖像的尺寸。這樣的話，瀏覽器在下載圖像之前就為其預(yù)留出了位置，從而可以加速文檔的顯示，還可以避免文檔內(nèi)容的移動(dòng)。這兩個(gè)屬性都要求是整數(shù)值，并以像素為單位來表示圖像尺寸。這兩個(gè)屬性在 <img> 標(biāo)簽中出現(xiàn)的次序并不重要。

height 和 width 屬性的問題

雖然 <img> 標(biāo)簽的 height 和 width 屬性能夠改善性能并讓你實(shí)現(xiàn)一些小技巧，但在使用它們時(shí)還是有一些棘手的負(fù)面效果。即使用戶已經(jīng)關(guān)掉了自動(dòng)下載圖像的功能，瀏覽器還是要把為圖像預(yù)留的空間以指定的尺寸顯示出來。而這樣留給讀者的通常是一個(gè)空的框架，里面有一個(gè)毫無意義的圖標(biāo)，表示這是放置圖像的位置。這時(shí)頁面將看上去非常糟糕，就像根本沒有完成一樣，并且大部分內(nèi)容都毫無用處。如果不用這些指定的尺寸，則瀏覽器將只是在文本中放置一個(gè)圖像圖標(biāo)，這樣顯示中至少還有一些文字可以閱讀。

推薦教程：《html視頻教程》

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

width屬性設(shè)置元素的寬度，height屬性設(shè)置元素的高度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img{
				width:200px ;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg"/>
	</body>
</html>

怎么在html中設(shè)置圖片大小

上述內(nèi)容就是怎么在html中設(shè)置圖片大小，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手