首頁 >web前端 >css教學 >css如何控制圖片寬度

css如何控制圖片寬度

青灯夜游原創: 2021-02-24 11:50:124710瀏覽

在css中，如果是img圖片，可以使用width屬性來控制圖片寬度，例如「img{width:100px;}」；如果是背景圖片，則使用background-size屬性來控制圖片寬度，語法“background-size:寬度高度;”。

css如何控制圖片寬度

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

1、使用img圖片--使用width屬性

css如何控制圖片寬度標籤定義 HTML 頁面中的圖片。而width屬性設定元素的寬度。

範例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.img2{
				width: 200px;
			}
		</style>
	</head>

	<body>
		<p>
		原始尺寸：<img  src="img/2.jpg" alt="css如何控制圖片寬度" >
		</p>
		<p>
		修改后的尺寸：<img  class="img2" src="img/2.jpg" alt="css如何控制圖片寬度" >
		</p>
	</body>

</html>

效果圖：

css如何控制圖片寬度

#【推薦教學：CSS影片教學】

2、背景圖片--使用background-size屬性

background-size屬性指定背景圖片大小。

語法

background-size: length|percentage|cover|contain;

css如何控制圖片寬度

範例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			body {
				background: url(img/1.jpg);
				background-size: 80px 60px;
				background-repeat: no-repeat;
				padding-top: 40px;
			}
		</style>
	</head>

	<body>

		<br /><br />
		<p>原始图片: <br />
			<img src="img/1.jpg" alt="Flowers" width="224"    style="max-width:90%">
		</p>

	</body>

</html>

效果圖：

css如何控制圖片寬度

##更多程式相關知識，請造訪：

程式設計入門！！

以上是css如何控制圖片寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 html background

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css怎麼把字體顏色改為白色下一篇：css怎麼把字體顏色改為白色

看更多