{"id":5294,"date":"2025-03-06T12:22:27","date_gmt":"2025-03-06T12:22:27","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&p=5294"},"modified":"2025-03-06T12:22:28","modified_gmt":"2025-03-06T12:22:28","slug":"what-are-flexible-images","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/de\/antworten\/what-are-flexible-images\/","title":{"rendered":"Was sind flexible Bilder?"},"content":{"rendered":"

Wie mache ich Bilder mit CSS flexibel?<\/strong><\/h2>\n\n\n\n

F\u00fcr die Flexibilit\u00e4t von Bildern wird eine CSS-Regel bereitgestellt:<\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

img {
  max-width: 100%;
  height: auto;
}
<\/p>\n\n\n\n

Dieser Code weist den Browser effektiv an, zu verhindern, dass das Bild gr\u00f6\u00dfer als der Container wird, in dem es sich befindet, w\u00e4hrend gleichzeitig seine H\u00f6he beibehalten wird, sodass das urspr\u00fcngliche Seitenverh\u00e4ltnis erhalten bleibt.<\/p>\n\n\n\n

\n
\n\t\t\t\t\t\t\t\nProfi-Tipp:\u00a0\n\n<\/div>\n
\n\nWenn Sie mehr Flexibilit\u00e4t bei der Gr\u00f6\u00dfen\u00e4nderung von Bildern w\u00fcnschen, k\u00f6nnen Sie CSS-Media-Queries hinzuf\u00fcgen, um Stylesheets f\u00fcr bestimmte Bildschirmaufl\u00f6sungen anzupassen.\n\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

Was ist das srcset-Attribut und wie verh\u00e4lt es sich zu flexiblen Bildern?<\/strong><\/h2>\n\n\n\n

Mit dem srcset-Attribut k\u00f6nnen Sie verschiedene Varianten eines Bildes mit unterschiedlichen Aufl\u00f6sungen angeben, sodass basierend auf der Bildschirmgr\u00f6\u00dfe und -aufl\u00f6sung des Benutzers die am besten geeignete Version geladen wird. Die Bereitstellung der am besten geeigneten Bildversion wirkt sich auf die Leistungsgeschwindigkeit und die Benutzererfahrung aus.<\/p>\n\n\n\n

\n
\n\t\t\t\t\t\t\t\nProfi-Tipp:\u00a0\n\n<\/div>\n
\n\nDurch die Verwendung von srcset und den Gr\u00f6\u00dfenmodifikatoren k\u00f6nnen Sie dem Browser noch mehr Informationen \u00fcber die am besten geeignete Bildquelle mitteilen.\n\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

Was sind die Vorteile der Verwendung flexibler Bilder?<\/strong><\/h2>\n\n\n\n

Flexible Bilder k\u00f6nnen unter bestimmten Umst\u00e4nden Folgendes bewirken:<\/p>\n\n\n\n