Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So steuern Sie die Bildbreite mit CSS

青灯夜游
Freigeben: 2023-01-03 09:25:07
Original
4648 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 CSSEinfü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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!