Wie kann man Bilder mit CSS responsiv machen
Responsive Bilder passen sich automatisch an, um Bilder auf dem Gerät des Benutzers anzuzeigen. Sie werden verwendet, um die Größe des Bildschirms anzupassen.
Der einfachste Weg, die Bilder responsive zu machen, ist die Definition von width für das Element <img>. Wenn Sie die Einstellung width vornehmen, passt sich das Bild an seinen Container an. Wenn es sich innerhalb eines Artikels befindet, nimmt es 100% der Artikelbreite ein.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<h2>Responsives Bild</h2>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq"/>
</body>
</html>Wenn Sie ein responsives Bild haben, aber es begrenzen möchten, verwenden Sie die CSS-Eigenschaft max-width. Es wird die Bildbreite in Pixeln angezeigt, maximal 100% der Breite des Containers. Das bedeutet (wenn man bedenkt, dass Ihre Bildbreite 300px beträgt):
- Wenn der Container 200px ist: das Bild wird 300px sein (max-width: 100%)
- Wenn der Container 300px ist: das Bild wird 300px sein (max-width: 100%)
- Wenn der Container 1400px ist: das Bild bleibt 300px!
Es gibt feste Punkte, z. B. ein festes Navigationsmenü, für das wir eine bestimmte Höhe einstellen müssen. Meistens sind die Höhe und die Breite symmetrisch. Wenn die Breite des Bildes reduziert wird, um sich an die Reaktion anzupassen, wird auch die Höhe reduziert. Wenn die Breite fest ist, ist die Höhe auch gleich.
Lassen Sie uns ein Beispiel sehen, um zu visualisieren, was wir für reaktionsschnelle Bilder gesagt haben:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsives Bild mit max-width und height</h2>
<div>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq"/>
</div>
</body>
</html>Wenn Sie mehrere Bilder einstellen möchten, benötigen Sie das Attribut srcset. Das Attribut srcset definiert den Satz von Bildern, die dem Browser zur Auswahl angeboten werden.
Damit es richtig funktioniert, empfehlen wir Ihnen, das Element <picture> zu verwenden, und nicht das <img>.
Lassen Sie uns ein Beispiel betrachten, wo mehrere Bilder eingestellt sind. Sehen Sie, wie sie geändert werden, wenn eine bestimmte Bildschirmbreite definiert ist.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
<source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg">
<img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:50%;">
</picture>
<p>Lorem Ipsum ist ein reiner Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker eine Kombüse vom Typ nahm und sie zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in den elektronischen Satz, der im Wesentlichen unverändert geblieben ist.</p>
</body>
</html>Wie kann man die Hintergrundbilder responsive machen
Es gibt 3 Methoden, um Bilder reaktionsschnell zu machen:
- Wenn die Eigenschaft background-size auf contain gesetzt ist, wird das Hintergrundbild skaliert und versucht, sich dem Inhaltsbereich anzupassen. Das Bild behält jedoch das proportionale Verhältnis zwischen der Breite und Höhe:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div.img-block {
width: 100%;
height: 450px;
background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
background-repeat: no-repeat;
background-size: contain;
border: 1px solid black;
}
h1 {
padding: 0 10px;
color: #fff;
}
</style>
</head>
<body>
<p>Ändern Sie die Größe des Browserfensters, um den Effekt zu sehen.</p>
<div class="img-block">
<h1>Ihr Hintergrundbild</h1>
</div>
</body>
</html>- Wenn die Eigenschaft background-size auf 100% 100%, gesetzt ist, erstreckt sich das Hintergrundbild über den gesamten Inhaltsbereich:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div.img-block {
width: 100%;
height: 450px;
background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
background-size: 100% 100%;
border: 1px solid black;
}
h2 {
padding: 0 10px;
color: #fff;
}
</style>
</head>
<body>
<p>Ändern Sie die Größe des Browserfensters, um den Effekt zu sehen.</p>
<div class="img-block">
<h2>Ihr Hintergrundbild</h2>
</div>
</body>
</html>- Wenn die Eigenschaft background-size auf cover gesetzt ist, wird das Hintergrundbild skaliert, um den gesamten Inhaltsbereich abzudecken. Beachten Sie, dass ein Teil des Hintergrundbildes beschnitten sein kann:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div.img-block {
width: 100%;
height: 450px;
background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
background-size: cover;
border: 1px solid red;
}
h2 {
padding: 0 10px;
color: #fff;
}
</style>
</head>
<body>
<p>Ändern Sie die Größe des Browserfensters, um den Effekt zu sehen.</p>
<div class="img-block">
<h2> Ihr Hintergrundbild</h2>
</div>
</body>
</html>