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中进行学习和了解！