如何改變圖片大小

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 15:22:28

如何改變圖片大小

如何改變圖片大小:我們進行網(wǎng)頁設(shè)計的時候圖片有時候可以會不符合大小，那我們怎么樣才能在代碼中實現(xiàn)圖片大小的改變呢？本篇文章就來給大家介紹關(guān)于如何改變圖片的大小？我們改變圖片的大小有兩種方法：一種是在HTML標(biāo)簽內(nèi)更改寬度和高度；另一種是使用CSS樣式控制width和

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀如何改變圖片大小:我們進行網(wǎng)頁設(shè)計的時候圖片有時候可以會不符合大小，那我們怎么樣才能在代碼中實現(xiàn)圖片大小的改變呢？本篇文章就來給大家介紹關(guān)于如何改變圖片的大小？我們改變圖片的大小有兩種方法：一種是在HTML標(biāo)簽內(nèi)更改寬度和高度；另一種是使用CSS樣式控制width和

我們進行網(wǎng)頁設(shè)計的時候圖片有時候可以會不符合大小，那我們怎么樣才能在代碼中實現(xiàn)圖片大小的改變呢？本篇文章就來給大家介紹關(guān)于如何改變圖片的大小？

我們改變圖片的大小有兩種方法：一種是在HTML標(biāo)簽內(nèi)更改寬度和高度；另一種是使用CSS樣式控制width和height屬性。

我們先來看HTML標(biāo)簽內(nèi)更改圖像寬度和高度

直接在圖片img標(biāo)簽中使用width和height屬性即可控制圖片寬和高。

代碼如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<img src="img/tupian.jpg" width="150" height="150">
</body>
</html>

效果如下（原圖為1072x768px）：

我們可以直接在圖片標(biāo)簽設(shè)置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" >
</body>
</html>

效果如下：圖片也變?yōu)榱?50x150px

微信截圖_20190109171608.png