溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了怎么在html中設置圖片大小，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。
方法1：利用img標簽的width和height屬性
<img> 標簽的 height 和 width 屬性設置圖像的尺寸。
<img src="img/1.jpg" width="200" height="200"/>
為什么要使用 height 和 width 屬性
您是否見過當文檔加載時其內容會顯示不規律的移動。之所以會這樣，是因為瀏覽器為了能夠顯示每一個加載的圖像，而不斷地重新調整頁面的布局。瀏覽器通過下載并解析出圖像的寬度和高度來決定圖像的大小，然后就會在顯示窗口中留出一個相應的矩形空間。然后瀏覽器就會調整頁面的顯示布局，以便把圖像插入到顯示當中。這同時也告訴我們，圖像是獨立的文件，它與源文件都分別是獨立加載的。
但是這不是一種最有效的顯示文檔的方法，因為瀏覽器在顯示相鄰的以及后面的文檔內容之前，必須要檢查每一個圖像文件，并計算它們的屏幕空間。這可能會給文檔的顯示帶來非常大的延遲，從而打斷用戶的閱讀。
對于創作者來說，一種更為有效的方法是通過 <img> 標簽的 height 和 width 屬性來指定圖像的尺寸。這樣的話，瀏覽器在下載圖像之前就為其預留出了位置，從而可以加速文檔的顯示，還可以避免文檔內容的移動。這兩個屬性都要求是整數值，并以像素為單位來表示圖像尺寸。這兩個屬性在 <img> 標簽中出現的次序并不重要。
height 和 width 屬性的問題
雖然 <img> 標簽的 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"/>
</body>
</html>
上述內容就是怎么在html中設置圖片大小，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
