css有哪些缩小图片方法？各种方法分享！
今天小编来和大家分享有关于：“css有哪些缩小图片方法？各种方法分享！”这个问题的相关内容分享，希望可以帮助到大家！
首先我们来新建一个新的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标签内，使用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" style="width: 200px;height: 100px;" />
<p>缩小之后</p>
</div>
</body>
</html>
以上这几种方法的效果是一样的，那么我们下面来看看出来的效果吧！效果截图如下：
通过上面这几个方法，相信大家对于：“css有哪些缩小图片方法？各种方法分享！”这个问题也有了自己看法，那么在html中还有很多有趣的玩法，更多有关于这方面的内容我们都可以在W3Cschool中进行学习和了解！