App下載

css有哪些縮小圖片方法？各種方法分享！

猿友 2021-07-28 17:04:34 瀏覽數(shù) (5110)
反饋

今天小編來和大家分享有關(guān)于：“css有哪些縮小圖片方法？各種方法分享！”這個問題的相關(guān)內(nèi)容分享，希望可以幫助到大家！

首先我們來新建一個新的HTML文件，還未進行縮小的代碼和結(jié)果截圖如下：

代碼部分：

<!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>

運行結(jié)果截圖：

還未縮小效果

方法一：

通過元素名稱來改變圖片的大小。例如，在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標簽設(shè)置一個id屬性，在css中通過id屬性，使用width(寬度)和height(高度)設(shè)置樣式，實現(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標簽設(shè)置一個class屬性，在css中通過class屬性，使用width(寬度)和height(高度)設(shè)置樣式，實現(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來設(shè)置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>

以上這幾種方法的效果是一樣的，那么我們下面來看看出來的效果吧！效果截圖如下：

縮小之后結(jié)果

通過上面這幾個方法，相信大家對于：“css有哪些縮小圖片方法？各種方法分享！”這個問題也有了自己看法，那么在html中還有很多有趣的玩法，更多有關(guān)于這方面的內(nèi)容我們都可以在W3Cschool中進行學習和了解！


HTML CSS

1 人點贊