改變圖片大小的方法: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中文網其他相關文章!