Wenn Sie sich mit Webentwicklung beschäftigen, sind Sie höchstwahrscheinlich mit zwei Monstern vertraut, die in dem Artikel behandelt werden, dessen Übersetzung wir heute veröffentlichen. Wir sprechen über Bilder und Fristen. Manchmal möchten die Bilder aus irgendeinem Grund nicht in die Stellen der Seitenlayouts passen, die für sie entworfen wurden, und Sie können nicht mehrere Stunden damit verbringen, dies herauszufinden.
Der Autor dieses Materials sagt, dass er oft mit einem ähnlichen Problem konfrontiert war und diese Kollisionen ihm etwas beigebracht haben. Hier möchte er über fünf Ansätze zur Verwaltung von Bildgrößen sprechen, die ihm am besten gefallen.
Ansatz Nr. 1: Hintergrundbild
Freitag. Fünf Uhr abends. Sie müssen dringend eine bestimmte Seite fertigstellen. Alles ist fertig, das einzige Problem sind die Bilder, die in keiner Weise dort passen, wo sie sein sollten. Wenn Ihnen das passiert ist - hier ist ein magisches Werkzeug, das Ihnen helfen wird:
.myImg { background-image: url("my-image.png"); background-size: cover; }
Kommt Ihnen das bekannt vor? Wir alle haben das einmal gemacht. Hat Ihnen dies Betrug nahegelegt?
Die Verwendung der
background ist sehr nützlich. Sie tun genau das, was von ihnen erwartet wird. Es ist jedoch zu beachten, dass sie nur für Bilder verwendet werden sollten, die nicht Teil des Hauptinhalts der Seite sind, für Bilder, die Text ersetzen, und in einigen
besonderen Fällen .
Ansatz 2: Objektanpassung
Was ist, wenn ich sage, dass die
object-fit für
<img> -Elemente gilt? Übrigens funktioniert es auch mit Video.
.myImg { object-fit: cover; width: 320px; height: 180px; }
Das ist alles. Beachten Sie, dass die
object-fit kann, dass sie
contain .
▍Objekt-Fit-Unterstützung
Leider funktioniert die
object-fit im IE und in älteren Versionen von Safari nicht. In solchen Fällen gibt es jedoch eine
Polyfüllung .
Hier finden Sie die Support-Informationen
von hier .
Unterstützung für objektangepasste Desktop-Browser→
Hier ist ein Beispiel für die Objektanpassung
Ansatz 3: Die Art und Weise, wie Netflix verwendet
Was wir gerade besprochen haben, mag interessant erscheinen, aber in veralteten Browsern ohne Polyfills funktioniert dies nicht. Wenn Sie etwas Universelles brauchen, ist das, worüber wir jetzt sprechen, vielleicht das Richtige für Sie. Diese Methode, eine meiner Favoriten, funktioniert überall.
Es besteht darin, dass das Bild im übergeordneten Element platziert werden muss, dessen
position auf
relative , und die
padding in Prozent angegeben ist. Infolgedessen nimmt das Bild den gesamten freien Bereich des übergeordneten Elements ein. Es sieht so aus:
.wrapper { position: relative; padding-top: 56.25%; } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
Hier könnte man denken, dass es zu kompliziert ist. Nachdem Sie jedoch die Bedeutung dieser Technik verstanden haben, stellen Sie fest, dass sie sehr einfach und bequem ist. Darüber hinaus ist diese Technik beispielsweise in Netflix
weit verbreitet .
Schauen Sie sich die Klassennamen an→
Hier ist ein Beispiel für die Implementierung dieser Technik
Ansatz Nr. 4: Höhe
Verwenden Sie hier zur Steuerung der Bildgröße die Eigenschaft
height: auto und zusätzlich die Eigenschaft
max-width . Möglicherweise kennen Sie diese Technik bereits:
img { height: auto; width: 100%; max-width: 720px; }
Dieser Ansatz ist in den meisten Fällen anwendbar, wenn Ihr Layout nicht zu kompliziert ist.
→
Hier ist ein BeispielAnsatz 5: Bildverwaltung und Leistung
Mit "Leistung" meine ich die Ladezeit der Seite. Das Laden eines großen Bildes kann sehr lange dauern, was dem Benutzer den Eindruck vermittelt, dass Ihre Seiten langsam sind, insbesondere wenn diese Seiten auf Mobilgeräten angezeigt werden.
Wissen Sie, dass Sie in
modernen Browsern die Bildquelle abhängig von der Seitenbreite ändern können? Aus diesem Grund ist das Attribut
srcset .
Ähnliche Attribute können im HTML 5-Tag verwendet werden
. , , <img> . , , <img> :
<picture> <source media="(max-width: 799px)" srcset="elva-480w.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img align="center" src="elva-800w.jpg"> </picture>
→ Hier ist ein BeispielZusammenfassung
Zusammenfassend:
- Wenn Ihr Bild nicht Teil des Seiteninhalts ist, verwenden Sie das
background-image . - Wenn Sie die IE-Unterstützung nicht interessiert, verwenden Sie
object-fit . - Die Netflix-basierte Containertechnologie mit benutzerdefinierter
padding funktioniert überall. - In den meisten Fällen reicht es aus, die Eigenschaft
height: auto in CSS zu verwenden, um das Problem mit Bildern zu lösen. - Wenn Sie die Ladezeit von Seiten reduzieren möchten, verwenden Sie das Attribut
srcset , um kleinere Bilder auf Mobilgeräte herunterzuladen.
Wir hoffen, dass die hier diskutierten Ansätze zur Arbeit mit Bildern für Sie nützlich sind.
