Heim > Artikel > Web-Frontend > So steuern Sie die Bildbreite mit CSS

So steuern Sie die Bildbreite mit CSS

青灯夜游Original: 2021-02-24 11:50:124670Durchsuche

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;“.

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>

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;

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>

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!

html5 css css3 html background

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So ändern Sie die Schriftfarbe in CSS in WeißNächster Artikel：So ändern Sie die Schriftfarbe in CSS in Weiß

In Verbindung stehende Artikel

Mehr sehen