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