Responsive Webdesign-Bilder


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Ändern Sie die Größe des Browserfensters, um zu sehen, wie das Bild an die Seite angepasst wird.



Verwenden der Eigenschaft width

Wenn die Eigenschaft width auf einen Prozentsatz festgelegt ist und die Eigenschaft height auf „auto“ gesetzt ist, wird das Bild angezeigt reaktionsfähig und nach oben und unten skalierbar:

Beispiel

img {
  width: 100%;
  height: auto;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>

<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale.</p>

</body>
</html>


Beachten Sie, dass das Bild im obigen Beispiel vergrößert werden kann als seine ursprüngliche Größe. In vielen Fällen ist die Verwendung von die bessere Lösung Stattdessen können Sie die Eigenschaft max-width verwenden.


Verwenden der Eigenschaft max-width

Wenn die Eigenschaft max-width auf 100 % gesetzt ist, wird das Bild bei Bedarf verkleinert, aber niemals größer als es Originalgröße:

Beispiel

img {
    max-width: 100%;
  height: auto;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>

<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale when the width is less than 460px.</p>

</body>
</html>



Fügen Sie der Beispielwebseite ein Bild hinzu

Beispiel

img {
    width: 100%;
  height: auto;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
}

.row:after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  width: 100%;
}

@media only screen and (min-width: 600px) {
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <img src="img_chania.jpg" width="460" height="345">
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>What?</h2>
      <p>Chania is a city on the island of Crete.</p>
      <h2>Where?</h2>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
      <h2>How?</h2>
      <p>You can reach Chania airport from all over Europe.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>




Hintergrundbilder

Hintergrundbilder können auch auf Größenänderung und Skalierung reagieren.

Hier zeigen wir drei verschiedene Methoden:

1. Wenn die Eigenschaft background-size auf „contain“ gesetzt ist, wird das Hintergrundbild skaliert und versucht, in den Inhaltsbereich zu passen. Das Bild behält jedoch sein Seitenverhältnis (das proportionale Verhältnis zwischen Breite und Höhe des Bildes):


Hier ist der CSS-Code:

Beispiel

div {
  width: 100%;
  height: 400px;
  
background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>



2. Wenn die Eigenschaft background-size auf „100 % 100 %“ eingestellt ist, wird das Hintergrundbild gestreckt, um den gesamten Inhaltsbereich abzudecken:


Hier ist der CSS-Code:

Beispiel

div {
  width: 100%;
  height: 400px;
  
background-image: url('img_flowers.jpg');
  
background-size: 100% 100%;
  border: 1px solid red;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>



3. Wenn die Eigenschaft background-size auf „cover“ gesetzt ist, wird das Hintergrundbild so skaliert, dass es den gesamten Inhaltsbereich abdeckt. Beachten Sie, dass der Wert „cover“ das Seitenverhältnis beibehält und ein Teil des Hintergrundbilds möglicherweise abgeschnitten wird:


Hier ist der CSS-Code:

Beispiel

div {
  width: 100%;
  height: 400px;
  
background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>



Unterschiedliche Bilder für unterschiedliche Geräte

Ein großes Bild kann auf einem großen Computer perfekt sein Bildschirm, aber auf einem kleinen Gerät nutzlos. Warum wann ein großes Bild laden? Muss man es trotzdem verkleinern? Um die Belastung zu reduzieren oder aus anderen Gründen, können Sie Medienabfragen verwenden, um verschiedene Bilder auf verschiedenen Geräten anzuzeigen.

Hier ist ein großes Bild und ein kleineres Bild, die auf verschiedenen Geräten angezeigt werden:

Beispiel

/* For width smaller than 400px: */
body {
  background-image: 
url('img_smallflower.jpg'); 
}
/* 
For width 400px and larger: */
@media only screen and (min-width: 400px) 
{
  body { 
    background-image: url('img_flowers.jpg'); 
    }
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* For width smaller than 400px: */
body {
  background-repeat: no-repeat;
  background-image: url('img_smallflower.jpg'); 
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
  body { 
     background-image: url('img_flowers.jpg'); 
  }
}
</style>
</head>
<body>

<p style="margin-top:360px;">Resize the browser width and the background image will change at 400px.</p>

</body>
</html>


Sie können die Medienabfrage min-device-width anstelle von min-width verwenden Überprüft die Gerätebreite anstelle der Browserbreite. Dann ändert sich das Bild nicht, wenn Sie die Größe des Browserfensters ändern:

Beispiel

/* For devices smaller than 400px: */
body {
  background-image: 
url('img_smallflower.jpg'); 
}
/* 
For devices 400px and larger: */
@media only screen and (min-device-width: 400px) 
{
  body { 
    
background-image: url('img_flowers.jpg'); 
  }
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* For device width smaller than 400px: */
body {
  background-repeat: no-repeat;
  background-image: url('img_smallflower.jpg'); 
}

/* For device width 400px and larger: */
@media only screen and (min-device-width: 400px) {
  body { 
     background-image: url('img_flowers.jpg'); 
  }
}
</style>
</head>
<body>

</body>
</html>



Das HTML-<picture>-Element

Das HTML-Element <picture> gibt web Entwicklern mehr Flexibilität bei der Angabe von Bildressourcen.

Die häufigste Verwendung ist <picture> Das Element wird für Bilder verwendet, die in responsiven Designs verwendet werden. Anstatt eins zu haben Ein Bild, das basierend auf der Breite des Ansichtsfensters vergrößert oder verkleinert wird, kann mehrere Bilder enthalten so gestaltet werden, dass das Browser-Ansichtsfenster besser ausgefüllt wird.

Das Element <picture> funktioniert ähnlich wie das Element <video> und <audio> Elemente. Sie richten verschiedene Quellen ein, und die erste Quelle, die dazu passt Preferences wird verwendet:

Beispiel

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 
400px)">
  <source srcset="img_flowers.jpg">
  <img 
src="img_flowers.jpg" alt="Flowers">
</picture>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

<p>Resize the browser width and the background image will change at 400px.</p>

</body>
</html>


Das Attribut srcset ist erforderlich und definiert die Quelle des Bildes.

Das Attribut media ist optional und akzeptiert die Medienabfragen, die Sie in finden CSS-@media-Regel.

Sie sollten auch ein <img>-Element für Browser definieren, die das nicht unterstützen <picture>-Element.