今天小編來和大家分享有關于：“css有哪些縮小圖片方法？各種方法分享！”這個問題的相關內(nèi)容分享，希望可以幫助到大家！
首先我們來新建一個新的HTML文件，還未進行縮小的代碼和結果截圖如下：
代碼部分：
<!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>
運行結果截圖：
方法一：
通過元素名稱來改變圖片的大小。例如，在css標簽內(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>
方法二：
通過給img標簽設置一個id屬性，在css中通過id屬性，使用width(寬度)和height(高度)設置樣式，實現(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>
方法三：
通過給img標簽設置一個class屬性，在css中通過class屬性，使用width(寬度)和height(高度)設置樣式，實現(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>
方法四：
通過在img標簽內(nèi)，使用style來設置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>
以上這幾種方法的效果是一樣的，那么我們下面來看看出來的效果吧！效果截圖如下：
通過上面這幾個方法，相信大家對于：“css有哪些縮小圖片方法？各種方法分享！”這個問題也有了自己看法，那么在html中還有很多有趣的玩法，更多有關于這方面的內(nèi)容我們都可以在W3Cschool中進行學習和了解！
