今天小編來(lái)和大家分享有關(guān)于：“css有哪些縮小圖片方法？各種方法分享！”這個(gè)問(wèn)題的相關(guān)內(nèi)容分享，希望可以幫助到大家！
首先我們來(lái)新建一個(gè)新的HTML文件，還未進(jìn)行縮小的代碼和結(jié)果截圖如下：
代碼部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css怎么改變圖片大小</title>
<style type="text/css">
*{margin: 0;padding: 0;}
</style>
</head>
<body>
<div align="center">
<img src="img/00.jpg" />
<p>還未縮小</p>
</div>
</body>
</html>
運(yùn)行結(jié)果截圖：
方法一：
通過(guò)元素名稱(chēng)來(lái)改變圖片的大小。例如，在css標(biāo)簽內(nèi)，使用css定義div元素內(nèi)的img元素的寬度為200px,高度為100px。代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css怎么改變圖片大小</title>
<style type="text/css">
div img {
width: 200px;
height: 100px;
}
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div align="center">
<img src="img/00.jpg" />
<p>縮小之后</p>
</div>
</body>
</html>
方法二：
通過(guò)給img標(biāo)簽設(shè)置一個(gè)id屬性，在css中通過(guò)id屬性，使用width(寬度)和height(高度)設(shè)置樣式，實(shí)現(xiàn)改變圖片的大小。代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css怎么改變圖片大小</title>
<style type="text/css">
#img-picture {
margin-top: 50px;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div align="center">
<img src="img/00.jpg" id="img-picture" />
<p>縮小之后</p>
</div>
</body>
</html>
方法三：
通過(guò)給img標(biāo)簽設(shè)置一個(gè)class屬性，在css中通過(guò)class屬性，使用width(寬度)和height(高度)設(shè)置樣式，實(shí)現(xiàn)改變圖片的大小。代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css怎么改變圖片大小</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.img-picture {
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div align="center">
<img src="img/00.jpg" class="img-picture" />
<p>縮小之后</p>
</div>
</body>
</html>
方法四：
通過(guò)在img標(biāo)簽內(nèi)，使用style來(lái)設(shè)置width(寬度)和height(高度)屬性。代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css怎么改變圖片大小</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div align="center">
<img src="img/00.jpg" style="width: 200px;height: 100px;" />
<p>縮小之后</p>
</div>
</body>
</html>
以上這幾種方法的效果是一樣的，那么我們下面來(lái)看看出來(lái)的效果吧！效果截圖如下：
通過(guò)上面這幾個(gè)方法，相信大家對(duì)于：“css有哪些縮小圖片方法？各種方法分享！”這個(gè)問(wèn)題也有了自己看法，那么在html中還有很多有趣的玩法，更多有關(guān)于這方面的內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！
