如何改變圖片大小
- 不言原創
- 2019-01-09 17:40:33216857瀏覽
改變圖片大小的方法：1、在HTML標籤內更改寬度和高度，程式碼如「img src="..." width="..." height="..."> 」；2、使用CSS樣式控制width和height屬性。
本文操作環境：Windows7系統、Dell G3電腦、HTML5&&CSS3。
我們進行網頁設計的時候圖片有時候可以會不符合大小，那我們怎麼樣才能在程式碼中實現圖片大小的改變呢？本篇文章就來跟大家介紹如何改變圖片的大小？
我們改變圖片的大小有兩種方法：一種是在HTML標籤內更改寬度和高度；另一種是使用CSS樣式控制width和height屬性。
我們先來看HTML標籤內更改圖片寬度和高度
#直接在圖片img標籤中使用width和height屬性即可控制圖片寬和高。
程式碼如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="img/tupian.jpg" style="max-width:90%" style="max-width:90%" alt="如何改變圖片大小" > </body> </html>
效果如下（原文圖為1072x768px）：
我們可以直接在圖片標籤設定width和height，看起來會很直覺。
接著我們來看使用CSS樣式控制width和height屬性
#我們用同一張圖片，程式碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<img src="img/tupian.jpg" alt="如何改變圖片大小" >
</body>
</html>效果如下：圖片也變為了150x150px
以上是如何改變圖片大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn