這篇文章主要介紹了css縮小圖片的方法有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇css縮小圖片的方法有哪些文章都會有所收獲，下面我們一起來看看吧。
代碼部分：
<!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標簽內，使用css定義div元素內的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(高度)設置樣式，實現改變圖片的大小。代碼如下所示：
<!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(高度)設置樣式，實現改變圖片的大小。代碼如下所示：
<!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標簽內，使用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" />
<p>縮小之后</p>
</div>
</body>
</html>關于“css縮小圖片的方法有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“css縮小圖片的方法有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
