So steuern Sie die Bildbreite mit CSS-CSS-Tutorial-php.cn

So steuern Sie die Bildbreite mit CSS

青灯夜游

Freigeben： 2023-01-03 09:25:07

Original

4775 Leute haben es durchsucht

Wenn es sich in CSS um ein IMG-Bild handelt, können Sie das width-Attribut verwenden, um die Bildbreite zu steuern, zum Beispiel „img{width:100px;}“; wenn es sich um ein Hintergrundbild handelt, verwenden Sie das Attribut „background-size“. Steuern Sie die Bildbreite mit der Syntax „background -size:width-height;“.

So steuern Sie die Bildbreite mit CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

1. Verwenden Sie img-Bilder – verwenden Sie das width-Attribut

So steuern Sie die Bildbreite mit CSS Das width-Attribut legt die Breite des Elements fest.

Example:

<!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="So steuern Sie die Bildbreite mit CSS" >
		</p>
		<p>
		修改后的尺寸：<img  class="img2" src="img/2.jpg" alt="So steuern Sie die Bildbreite mit CSS" >
		</p>
	</body>

</html>

Nach dem Login kopieren

rendering:

So steuern Sie die Bildbreite mit CSS

[empfohlenes Tutorial: CSS Video Tutorial ]

2. die Größe des Hintergrundbilds.

Grammatik

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

Nach dem Login kopieren

Beispiel: So steuern Sie die Bildbreite mit 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>

Nach dem Login kopieren

Rendering:

Weitere Programmierkenntnisse finden Sie unter: So steuern Sie die Bildbreite mit CSS Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonSo steuern Sie die Bildbreite mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!