这篇文章主要介绍了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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
