Zeitsparende CSS-Techniken zum Erstellen reaktionsschneller Bilder

Als Webentwickler besteht eine hohe Wahrscheinlichkeit, dass Sie auf die beiden Feinde dieses Artikels gestoßen sind: Bilder und Fristen . Manchmal passen Ihre Bilder aus bestimmten Gründen nicht zum Layout, und Sie möchten sich stundenlang nicht darum kümmern.

Diese Situation ist mir schon oft passiert und ich habe aus meinen Fehlern gelernt. Keine Hacks mit schwarzer Magie mehr - hier sind meine fünf Lieblingstechniken für die Größenänderung von Bildern.

die "OMG I NEED THIS ASAP" Weise

Am Freitag ist es 17:00 Uhr. Sie müssen diese Seite fertigstellen, aber die Bilder passen nicht zum Layout. Es ist Zeit, Ihren Zaubertrick anzuwenden!

.myImg { background-image: url("my-image.png"); background-size: cover; }

Klingt vertraut? Wir haben es alle einmal gemacht, fühlt es sich nicht so an, als würde man dich betrügen?

Die Verwendung von backgroundEigenschaften ist sehr nützlich, sie funktionieren einfach. Denken Sie jedoch daran, dass Sie sie nur für nicht inhaltliche Bilder oder als Ersatz für Text und in bestimmten Fällen verwenden sollten.

Der Weg aus der Zukunft

Was wäre, wenn ich dir sagen würde, dass diese Art von Magie auch für Elemente existiert? Sagen Sie "Hallo" zu der Objektanpassungseigenschaft - die übrigens auch für Videos funktioniert!

.myImg { object-fit: cover; width: 320px; height: 180px; }

Das war's Leute! Sehen Sie, wie wir den freundlichen Wert coverauch verwenden können, wenn wir ihn abrufen contain.

Okay, was ist die Falle?

Funktioniert leider object-fitnicht mit IE und älteren Versionen von Safari, aber es gibt eine Polyfüllung.

Der "Netflix" Weg

Sie denken vielleicht "netter Trickmann, eine weitere Möglichkeit, die in alten Browsern wie IE nicht funktioniert?". Keine Sorge, dieser funktioniert überall und ist mein Favorit! Sie müssen Ihr Bild mit einem relativ gepolsterten übergeordneten Element umschließen.

Wir behalten das Bildverhältnis mit einem Prozentsatz auf dem paddingGrundstück bei. Ihr Bild wird ein absolutes Kind in voller Größe sein.

Der Code sieht folgendermaßen aus:

.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

"Hey Mann, es sieht kompliziert aus."

Sobald Sie das Konzept erhalten haben, ist die Technik einfach und weit verbreitet. Netflix benutzt es!

Eine kleine Demo:

Der einfache Weg

Möglicherweise kennen Sie diesen bereits:

img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; }

Wenn Ihr Layout nicht zu kompliziert ist, funktioniert es in den meisten Fällen.

Der Performance-Weg (Fortgeschrittene)

Mit Leistung meine ich Ladezeiten. Ein großes Heldenbild kann es ruinieren und dazu führen, dass sich Ihre Seite langsam anfühlt, insbesondere auf Mobilgeräten.

Wussten Sie, dass Sie in modernen Browsern eine Bildquelle abhängig von Ihrer Seitenbreite ändern können? Dafür srcsetist gemacht!

Sie können sie mit dem HTML 5- Tag kombinieren , das sich mit einem elegant verschlechtert .

Um es noch einmal zusammenzufassen

  1. Verwenden background-image Sie diese Option, wenn Ihr Bild nicht Teil des Seiteninhalts ist.
  2. Verwenden object-fitSie diese Option, wenn Sie sich nicht für IE interessieren.
  3. Die von Netflix verwendete Technik für gepolsterte Container funktioniert überall.
  4. In den meisten Fällen fügen height: auto;Sie einfach Ihr CSS hinzu.
  5. Wenn Sie schnelle Ladezeiten benötigen srcset, laden Sie kleinere Bilder auf Mobilgeräten.