Get best of the week

[Lesezeichen] Arbeiten mit Bildern im Web

Eine der Entscheidungen, die ein Front-End-Entwickler beim Erstellen einer Website treffen muss, betrifft die Wahl, wie Bilder in Webseiten aufgenommen werden sollen. Diese Methode kann darin bestehen, ein HTML-Tag zu verwenden <img>. Dies kann eine CSS-Eigenschaft backgroundoder ein <image>Element- Tag sein <svg>. Die Wahl des richtigen Ansatzes für die Arbeit mit Bildern ist sehr wichtig, da dies die Leistung und Verfügbarkeit des Projekts erheblich beeinträchtigen kann. Das Material, dessen Übersetzung wir heute veröffentlichen, widmet sich der Untersuchung verschiedener Möglichkeiten, Bilder in Webseiten aufzunehmen. Hier werden die Vor- und Nachteile dieser Methoden diskutiert. Darüber hinaus werden wir darüber sprechen, wann und warum sie normalerweise verwendet werden.





HTML <img> -Element


Ein Element <img>in den einfachsten Versionen seiner Verwendung enthält nur das Attribut, das für seinen ordnungsgemäßen Betrieb erforderlich ist src:

<img src="cool.jpg" alt="">

▍Breiten- und Höhenattribute einstellen


Wenn die Breite und Höhe des Bildes nicht angepasst werden, muss beim Laden der Seite und beim Laden des Bildes möglicherweise das Seitenlayout neu erstellt werden. Um dies zu vermeiden, können Sie die Attribute widthund das heightTag festlegen <img>:

<img src="cool.jpg" width="200" height="100" alt="">

Obwohl dieser Ansatz jemanden sozusagen ein wenig an die „alte Schule“ erinnert, ist er tatsächlich ziemlich nützlich. Um dies besser zu verstehen, werden wir das Obige anhand eines Beispiels demonstrieren. Ich schlage vor, Sie sehen sich dieses kurze Video an .


Rahmen aus dem Video. Das Bild links hat keine Breite und Höhe. Die Bilder auf der rechten Seite werden definiert.

Hier wird dieNetworkSymbolleistedesBrowser-Entwicklers angezeigt und der Vorgang des Ladens eines Bildpaars demonstriert. Eine davon befindet sich links, dargestellt durch das Tag<img>, das Attribute hatwidthundheightnicht festgelegt ist. Bei anderen Werten werden diese Attribute gesetzt.

Haben Sie bemerkt, dass auf der Seite der Platz für das richtige Bild reserviert ist, noch bevor dieses Bild geladen wird? Es geht um die gegebenen Attributewidthundheight. Achten Sie beim Hochladen darauf, was mit Bildunterschriften passiert. Dies ist eine klare Demonstration der Stärke von Attributenwidthundheight.

→ Hier ist ein Arbeitsbeispiel

▍Abblenden des Bildes mit CSS


Das Bild kann mit CSS ausgeblendet werden. Richtig, ein solches Bild wird beim Laden der Seite noch geladen. Daher ist hier Vorsicht geboten. Wenn ein bestimmtes Bild ausgeblendet werden muss, darf es nur zu dekorativen Zwecken verwendet werden.

Hier ist der CSS-Code, der das Bild verbirgt:

img {
    display: none;
}

Ich wiederhole: Bei diesem Ansatz lädt der Browser das Bild herunter, auch wenn es sich als unsichtbar herausstellt. Der Punkt hier ist, dass ein Element <img>als austauschbares Element betrachtet wird , sodass unsere Fähigkeit, ein solches Element über CSS zu verwalten, begrenzt ist.

▍Über die Verfügbarkeit von Inhalten


Die Verfügbarkeit von Bildern, die auf Seiten mit einem HTML-Element angezeigt werden, <img>wird durch ihre Attribute sichergestellt alt. Ein solches Attribut sollte eine klare Beschreibung des Bildes enthalten. Dies kann für Benutzer mit Bildschirmleseprogrammen sehr nützlich sein.

Wenn das altBild jedoch nicht beschrieben werden muss, wird immer noch nicht empfohlen, dieses Attribut zu löschen. Tatsache ist, dass in diesem Fall der Inhalt des Attributs "geäußert" wird src. Dies ist sehr schlecht für die Zugänglichkeit von Inhalten.

Das Attribut altist jedoch nicht nur im obigen Fall nützlich. Wenn das Bild aus irgendeinem Grund nicht hochgeladen wird und ein Attribut hataltDann wird der Text aus diesem Attribut anstelle des Bildes angezeigt. Ich möchte das Obige mit dem folgenden Beispiel veranschaulichen.

Wir haben ein paar Bilder:

<img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">

Das Attribut srcenthält eine falsche Adresse für die Bilddatei. Diese Datei kann vom Browser nicht geladen werden. Der erste <img>hat kein Attribut altund der zweite hat ein Attribut, in das eine leere Zeichenfolge geschrieben wird. Wie werden diese Elemente Ihrer Meinung nach auf der Seite angezeigt?


Links ist ein Bild ohne das alt-Attribut. Rechts - mit dem leeren alt-Attribut.

Unter dem Bild ohne das Attributaltist Seitenplatz reserviert, was den Benutzer verwirren und die Verfügbarkeit von Inhalten beeinträchtigen kann. Und ein anderes Bild nimmt sehr wenig Platz ein, um den "Inhalt" eines leeren Attributs anzuzeigenalt. Infolgedessen sieht es eher wie ein Punkt als wie ein Bild aus. Dies geschieht aufgrund der Bildeigenschaftseinstellungenborder.

Wenn jedochaltetwasin das Attributgeschrieben wird, sieht das Bild anders aus.


Rechts ist das Bild, in dessen alt-Attribut der Text geschrieben ist.

Dies ist viel besser als nichts. Wenn Sie die angezeigte Datei nicht laden können<img>, können Sie ihr außerdem ein Pseudoelement hinzufügen.

▍ Reaktionsschnelle Bilder



Bilder unterschiedlicher Größe

Das Element<img>ist insofern gut, als es so konfiguriert werden kann, dass verschiedene Versionen des Bildes in den Anzeigebereichen der Seite unterschiedlicher Größe angezeigt werden. Dies kann beispielsweise für Bilder verwendet werden, die in Artikeln verwendet werden.

Ein ansprechender Satz von Bildern kann auf zwei Arten angepasst werden.

1. srcset-Attribut


Hier ist der Bildcode, der das Attribut verwendet srcset:

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

Dies ist ein einfaches Beispiel. Ich halte es nicht für eine ideale Lösung, um srcsetBilder unterschiedlicher Größe zu beschreiben, die auf Bildschirmen mit unterschiedlichen Eigenschaften angezeigt werden. Tatsache ist, dass in einer solchen Situation das letzte Wort beim Browser verbleibt und der Entwickler die Auswahl des Browsers nicht beeinflussen kann.

2. HTML-Bildelement


Hier ist der Code, der das Element verwendet <picture>:

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)" />
  <source srcset="medium.jpg" media="(min-width: 500px)" />
  <img src="small.jpg" />
</picture>

Eine weitere Option zum Erstellen von reaktionsschnellen Bildern ist die Verwendung eines Elements <picture>. Ich mag diesen Ansatz mehr, weil er einfacher ist und vorhersehbarere Ergebnisse liefert.

Hier ist ein Demo-Projekt für diesen Abschnitt.

▍ Ändern der Bildgröße



Auf der linken Seite befindet sich ein Bild, für das keine CSS-Objektanpassungseigenschaft festgelegt ist. Auf der rechten Seite befindet sich ein Bild, für das diese Eigenschaft mit

CSS-Eigenschaften festgelegt wurdeobject-fitund dasobject-positionsich hervorragend für ein Element eignet<img> . Sie geben uns die Kontrolle darüber, wie sich der Inhalt eines Elements ändert und positioniert wird<img>. Dies ähnelt dem Arbeiten mit einer CSS-Eigenschaftbackground.

Die Eigenschaftobject-fitkann folgende Werte haben:fill,contain,cover,none,scale-down.

So verwenden Sie es:

img {
    object-fit: cover;
    object-position: 50% 50%;
}

Nachdem wir das Element ein wenig herausgefunden haben <img>, ist es Zeit, weiterzumachen und die nächste Bildmanipulationstechnik zu beherrschen.

CSS-Eigenschaftsbilder


Wenn Sie die CSS-Eigenschaft zum Anzeigen von Bildern verwenden background, muss diese Eigenschaft auf ein Element mit einem bestimmten Inhalt oder auf ein Element mit Abmessungen angewendet werden. Normalerweise sind dekorative Elemente der Hauptnutzungsbereich dieser Eigenschaft.

▍Wie verwende ich die CSS-Hintergrundeigenschaft?


Um die CSS-Eigenschaft verwenden zu können background, benötigen wir zunächst ein Element:

<div class="element">Some content</div>

Dann brauchen Sie einen Stil:

.element {
    background: url('cool.jpg');
}

▍Stellen Sie mehrere Bilder in der Hintergrundeigenschaft ein


Eine nette Funktion von Bildern, die mit CSS-Eigenschaften angezeigt werden, backgroundist, dass es mehrere solcher Bilder geben kann. Diese Bilder können mit CSS bearbeitet werden:

.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');
}

▍Das Bild ausblenden


Mit CSS können Sie Bilder in einem bestimmten Anzeigebereich ausblenden und anzeigen. Gleichzeitig werden Bilder, die nicht angezeigt werden, nicht hochgeladen. Wenn das Bild in CSS nicht als sichtbar konfiguriert ist, wird es nicht geladen. Dies ist ein zusätzlicher Vorteil der CSS-Eigenschaft backgroundgegenüber dem Element <img>.

@media (min-width: 700px) {
    .element {
        background: url('cool-1.jpg');
    }
}

In diesem Beispiel wird ein Hintergrundbild beschrieben, das nur angezeigt wird, wenn die Breite des Ansichtsfensters größer ist 700px.

▍Über die Verfügbarkeit von Inhalten


Wenn Bilder, die mit der CSS-Eigenschaft angezeigt backgroundwerden, nicht korrekt verwendet werden, kann dies die Zugänglichkeit des Inhalts beeinträchtigen. Beispielsweise kann die Barrierefreiheit beeinträchtigt werden, indem ein solches Bild zum Lesezeichen eines Artikels verwendet wird. Dies ist bei der Arbeit mit einem Artikel von entscheidender Bedeutung.

▍ Schwierigkeiten beim Laden von Hintergrundbildern durch normale Benutzer


Normale Benutzer wissen, dass Sie, wenn Sie ein bestimmtes Bild speichern müssen, einfach mit der rechten Maustaste darauf klicken und den entsprechenden Kontextmenübefehl auswählen. Es mag Ihnen lustig erscheinen, aber mit Bildern, die mit der CSS-Eigenschaft festgelegt wurden background, funktioniert diese Technik nicht. Ein solches Bild kann nicht auf die übliche Weise geladen werden. Um es herunterzuladen, müssen Sie den Elementcode in den Entwicklertools untersuchen und den Link von verwenden url.

▍ Pseudoelemente


Pseudoelemente können auch mit Bildern verwendet werden, die durch die CSS-Eigenschaft definiert sind background. Zum Beispiel, um ein Bild über einem anderen anzuzeigen. Bei einem Element kann <img>dies nur mit einem zusätzlichen Element erreicht werden, das einem anderen Element überlagert ist.

Lassen Sie uns nun über die Verwendung von SVG-Bildern sprechen

SVG-Bilder


Die Hauptstärke von SVG-Bildern ist die Fähigkeit, sie zu skalieren, ohne an Qualität zu verlieren. <svg>Zusätzlich zu SVG-Bildern kann ein Element auch JPG- und PNG-Dateien anzeigen. Hier ist der HTML-Code für das SVG-Bild:

<svg width="200" height="200">
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>


JPG-Bild, das mit dem SVG-Element angezeigt wird

Beachten Sie das AttributpreserveAspectRatio? Dank ihm nimmt das Bild die gesamte Breite und Höhe des Elements ein<svg>, ohne sich zu dehnen und nicht zusammenzuziehen.

Wenn die Breite des Elements<image>größer ist, wird das übergeordnete Element (<svg>) in der Breitegefüllt, aber nicht gedehnt.


Das Bild wird nicht gedehnt.

Dies ist sehr ähnlich der Funktionsweise von CSS-Eigenschaftenobject-fit: coveroderbackground-size: cover.

▍Über die Verfügbarkeit von Inhalten


Wenn wir über die Verfügbarkeit von Inhalten bei der Verwendung von SVG-Bildern sprechen, kann ich sagen, dass ein solches Gespräch mich sofort an ein Element erinnert <title>. Unten sehen Sie ein Beispiel für einen Code, bei dem das <svg>folgende Element der Bildausgabe auf folgende Weise hinzugefügt wird :

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

Hier können Sie außerdem das Element verwenden <desc>:

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <desc>A meaningful description about the image</desc>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

▍Schwierigkeiten beim Laden von <svg> -Bildern durch normale Benutzer


Das mit der Hilfe angezeigte Bild können <svg>Sie nur herunterladen, indem Sie den Code analysieren und zum Link zum Bild gelangen. Dies ist ein Minus, aber wenn jemand die Fähigkeit gewöhnlicher Benutzer einschränken möchte, Bilder herunterzuladen, kann diese Funktion nützlich sein. Dies verringert zumindest die Wahrscheinlichkeit, dass ein solches Bild heruntergeladen wird.

→ Hier ist ein Beispiel für diesen Abschnitt

Szenarien für die Verwendung verschiedener Bildausgabemethoden


▍Seitenabschnitt oben angezeigt


Beim Entwerfen des Seitenabschnitts in seinem oberen Teil (ein solcher Abschnitt wird als "Heldenabschnitt" bezeichnet) ist es manchmal erforderlich, dass ein Bild angezeigt wird, auf dem ein Titel und einige andere Daten über die Seite angezeigt werden. Es könnte ungefähr so ​​aussehen.


Der obere Teil der Seite mit dem Bild und den Inschriften

Achten Sie darauf, dass ein Hintergrundbild vorhanden ist. Wie würden Sie einen solchen Abschnitt der Seite entwickeln? Bevor Sie diese Frage beantworten, möchte ich einige Anforderungen formulieren:

  • Das Image sollte eine einfache dynamische Änderung unterstützen, wenn die Seite in das Backend-CMS integriert wird.
  • Über dem Bild sollte ein Element platziert werden, um das Lesen des Textes zu vereinfachen.
  • Die Bildausgabe muss in drei Größen unterstützt werden: klein, mittel und groß. Jeder von ihnen ist für seinen eigenen Betrachtungsbereich vorgesehen.

Bevor wir mit der Lösung dieses Problems fortfahren, fragen wir uns nach der Art des Hintergrundbilds, das hier verwendet wird. Hier sind einige unterstützende Fragen, die uns dabei helfen sollen, dem auf den Grund zu gehen:

  1. Ist es wichtig, das Bild aus Sicht des Benutzers zu sehen, oder er verliert nichts, wenn es nicht sichtbar ist?
  2. Muss dieses Bild in Anzeigebereichen aller Größen angezeigt werden?
  3. Ist dieses Bild statisch oder ändert es sich dynamisch (z. B. von CMS)?

Betrachten Sie einige Optionen zur Lösung dieses Problems.

Die erste Lösung für das Problem


Mithilfe einer CSS-Eigenschaft backgroundmit mehreren darin definierten Bildern kann eines für ein Element verwendet werden, das dem Hauptbild überlagert ist, und das andere für die Darstellung des Bildes selbst. Schauen Sie sich dieses CSS an:

.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg');
    background-repeat: no-repeat;
    background-size: 100%, cover;
}

Mit diesem Ansatz können Sie das erreichen, was background-imageSie möchten. Sie können es mit JavaScript ändern:

<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  <!-- Hero content -->
</section>

backgroundIch habe die Eigenschaft in einem einbettbaren Stil definiert. Obwohl dies funktionierender Code ist, sieht er schlecht aus und ist unpraktisch.

Vielleicht können Sie hier CSS-Variablen verwenden?

<section class="hero" style="--bg-url: url('landscape.jpg')">
  <!-- Hero content -->
</section>

Hier ist das Ergebnis einer Stilstudie.


Studieren Sie den Stil des Elements

Um das Hintergrundbild zu ändern, müssen Sie nur noch die Variable ändern--bg-url. Dies ist millionenfach besser als Inline-Stile.

Analyse


  1. Die hier vorgeschlagene Lösung des Problems ist nur dann gut, wenn das Bild nicht besonders wichtig ist.
  2. Es kann geeignet sein, wenn nicht geplant ist, das Image mithilfe des im Projekt-Backend verwendeten CMS dynamisch zu ändern.

→ Hier ist ein Arbeitsbeispiel

Die zweite Lösung des Problems


Hier werden wir HTML-Bildausgabewerkzeuge verwenden:

<section class="hero">
  <h2 class="hero__title">Using Images in CSS</h2>
  <p class="hero__desc">An article about which and when to use</p>
  <img src="landscape.jpg" alt="">
</section>

In CSS müssen Sie die absolute Position des Bildes anpassen, indem Sie es unter dem Text platzieren. Außerdem benötigen wir hier ein Pseudoelement, das die Rolle des Elements spielt, das dem Bild überlagert ist:

.hero {
    position: relative;
}

.hero img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

Diese Lösung ist gut, da es bei Verwendung sehr einfach ist, das Bildattribut zu ändern src. Außerdem ist es besser für den Fall, dass das Ausgabebild wichtig ist.

Außerdem <img>stelle ich fest, dass ich an -images mag, dass Sie bei Verwendung Sicherungsmechanismen verwenden können, die funktionieren, wenn die Image-Datei nicht geladen werden kann. Ein solcher Hilfsmechanismus, beispielsweise die Ausgabe anstelle eines Bildes mit einem einfachen farbigen Hintergrund, ermöglicht es den Benutzern zumindest, den Text zu lesen:

.hero img {
    /*   */
    background: #2962ff;
  }


Die Hintergrundfarbe wird angezeigt, wenn das Bild nicht geladen werden kann.

Das Gute ist, dass die Hintergrundfarbe nur angezeigt wird, wenn das Bild nicht geladen werden kann. Es wird uns passen.

→ Hier ist ein Arbeitsbeispiel

▍ Website-Logo


Das Logo ist sehr wichtig. Logos verleihen Websites Einzigartigkeit. Um ein Logo auf einer Seite anzuzeigen, können wir auf verschiedene Möglichkeiten zurückgreifen:

  • Ein Element <img>, das ein PNG-, JPG- oder SVG-Bild anzeigt.
  • Eingebautes SVG-Bild.
  • Hintergrundbild.

Lassen Sie uns darüber sprechen, wie Bilder für Logos angezeigt werden sollen und wie Sie genau das auswählen, was Sie benötigen.

Logo mit vielen Details.


Wenn das Logo viele Details enthält oder viele Formen enthält, ist es möglicherweise keine gute Idee, es mit dem integrierten SVG-Bild anzuzeigen. In einer solchen Situation empfehle ich die Verwendung eines Tags <img>, mit dem ein PNG-, JPG- oder SVG-Bild angezeigt wird.


Verschiedene Logos

Hier ist der Code zum Anzeigen eines ähnlichen Logos, das im SVG-Format gespeichert ist:

<a href="#"><img src="logo.svg" alt="Nature Food"></a>

Einfaches Logo zum Animieren



Einfaches animiertes Logo

Stellen Sie sich eine Situation vor, in der ein einfaches Logo eine bestimmte Figur oder einen bestimmten Text enthält. Wenn Sie mit der Maus darüber fahren, müssen Sie die Farbe der Form und des Texts ändern. Wie kann man das machen? Es scheint mir, dass es in dieser Situation am besten ist, das eingebaute SVG-Image zu verwenden:

<a href="#">
    <svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
    </svg>
</a>

Hier sind die Stile:

.logo rect,
.logo text {
  transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}

Hier ist ein Demo-Projekt für diesen Abschnitt:

Reaktionsschnelles Logo


Als ich an reaktionsschnelle Logos dachte, erinnerte ich mich an das Smashing Magazine-Logo. Ich mag die Art und Weise, wie sich seine Größe ändert. Hier ist ein Layout, das das Basislogo und das Logo zeigt, die in großen Anzeigebereichen angezeigt werden.


Responsive Logo

Um dieses Logo-Verhalten zu implementieren, ist ein Element ideal<picture>, mit dem Sie zwei Versionen des Logos beschreiben können:

<a class="logo" href="/">
    <picture>
      <source media="(min-width: 1350px)" srcset="sm-logo--full.svg"><img src="sm-logo.svg" alt="Smashing Magazine"></picture>
  </a>

In CSS müssen Sie die Breite des Logos ändern, falls die Breite des Ansichtsfensters gleich oder größer ist 1350px:

.logo {
  display: inline-block;
  width: 45px;
}

@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}

Vor uns liegt eine einfache und verständliche Lösung für das Problem der reaktionsschnellen Logos.

→ Hier ist ein Arbeitsbeispiel für diesen Abschnitt

Logo mit Farbverlauf



Ein Beispiel für ein Logo mit Farbverlauf

Wenn Sie mit Logos mit Farbverlauf arbeiten, müssen Sie sich darüber im Klaren sein, dass das Exportieren eines solchen Logos aus einer Designanwendung wie Adobe Illustrator oder Sketch alles andere als perfekt sein kann. Während dieses Vorgangs kann etwas im Logo beschädigt werden.

Bei Verwendung des SVG-Formats können Sie dem Logo problemlos eine Verlaufsfarbe zuweisen. Im folgenden Beispiel habe ich das<linearGradient>Textattribut verwendetfill:

<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="0%" stop-color="#4a7def"></stop>
        <stop offset="50%" stop-color="#ab4787"></stop>
      </linearGradient>
    </defs>
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
</svg>

→ Hier ist ein Beispiel

▍Avatar-Benutzer


Avatare gibt es in vielen Formen, aber normalerweise in quadratischen oder runden Avataren. In diesem Beispiel möchte ich einen wichtigen Ratschlag teilen, den Sie möglicherweise nützlich finden.

Schauen Sie sich zunächst das folgende Layout an. Bitte beachten Sie, dass es zwei saubere Avatare mit klaren Kanten gibt.


Ein Paar erfolgreicher Avatare

Und was ist, wenn der Benutzer als Avatar beschließt, ein Bild mit einem fast weißen Hintergrund zu verwenden? Wenn ja, dann sieht der Avatar alles andere als gut aus.


Nicht erfolgreicher Avatar

Beachten Sie, dass das vorherige Bild einen Avatar mit einem sehr hellen Hintergrund zeigt. Um zu verstehen, dass es eine runde Form hat, muss man es sich daher genau ansehen. Das ist schlecht. Um dieses Problem zu beheben, müssen Sie dem Avatar einen inneren Rand hinzufügen. Dieser Rand wird als Hilfslösung verwendet und angewendet, wenn das Bild zu hell ist.


Links ist ein Avatar mit zu hellem Hintergrund. Auf der rechten Seite sehen Sie das Ergebnis der Lösung dieses Problems. Es

gibt verschiedene Möglichkeiten, dieses Problem zu lösen:

  • Verwenden von <img>.
  • Verwenden <img>und Hilfselement <div>.
  • Verwenden von <div>und CSS-Eigenschaften background.
  • Verwenden von <image>c <svg>.

Was passt hier am besten? Lass es uns herausfinden.

Verwenden von <img>


Wie kann man dieses Problem lösen? Vielleicht - passen Sie einfach den Rand des Elements an? Wir prüfen diese Möglichkeit (ich entschuldige mich sofort dafür, dass Sie unten häufig mein Foto sehen werden).

Hier ist das CSS:

.avatar {
    border: 2px solid #f2f2f2;
}

So sieht es aus.


Das Ergebnis war nicht wie erwartet: Der dunkle Rand befindet sich außerhalb der Bildränder.

Was passiert ist, passt nicht zu uns. Das Bild muss einen inneren Rand haben, der mit dem dunklen Bild verschmilzt. Infolgedessen stellt sich heraus, dass das Festlegen des Rahmens des Elements uns hier nicht hilft.

Verwenden Sie <img> und den Helfer <div>


Ich möchte Sie daran erinnern, dass wir vor der Aufgabe stehen, dem Bild einen inneren Schatten hinzuzufügen. Wir können dieses Problem nicht mit dem inneren Schatten ( box-shadow) und dem Schlüsselwort lösen inset, da HTML-Elemente <img>den inneren Schatten nicht unterstützen. Um dieses Problem zu lösen, müssen Sie einen Avatar in ein Element einfügen und ein <div>anderes Element verwenden, dessen einziger Zweck darin besteht, einen internen Rand zu zeichnen.

Hier ist der HTML-Code:

<div class="avatar-wrapper">
     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
     <div class="avatar-border"></div>
</div>

Hier sind die Stile:

.avatar-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
}

.avatar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

Wenn das Element <div>einen Rand hat, der in 10% Schwarz gestrichen ist, wird sichergestellt, dass ein solcher Rand im dunklen Bild nicht sichtbar ist und im Licht wahrgenommen wird, wodurch sein Rand hervorgehoben wird. So sieht es aus.


Der innere Rand, nur in hellen Bildern sichtbar

→ Hier ist ein Beispiel für diesen Abschnitt

Verwenden von <div> und der CSS-Hintergrundeigenschaft


Wenn ich ein Element zum Anzeigen des Avatars verwenden würde <div>, würde dies wahrscheinlich bedeuten, dass das Bild eine dekorative Rolle spielt. Ein Beispiel fällt mir ein (siehe unten). Hier sind verschiedene Avatare einfach über die Seite verteilt.


Auf der Seite verstreute Avatare. Der

HTML-Code hier lautet:

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>

Hier ist der Stil:

.avatar {
  background: var(--img-url) center/cover;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}

Hier finden Sie ein Arbeitsbeispiel.

Verwenden von <image> in <svg>


Ich glaube, dass dies die interessanteste Lösung für unser Problem ist. Diesen Trick habe ich beim Studium des neuen Facebook- Designs entdeckt .

Hier ist das Markup:

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>

Lassen Sie uns zuerst diesen Code analysieren. Hier ist was es ist:

  1. Eine Maske, die ein Kreisbild beschneidet.
  2. Die Gruppe, für die die Maske gilt.
  3. Das Bild selbst mit dem Attribut preserveAspectRatio=«xMidYMid».
  4. Ein Kreis, der als interner Rand verwendet wird.

So wird es gestylt:

circle {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

→ Hier finden Sie ein Beispiel

Mit den Avataren haben wir es herausgefunden. Deshalb gehen wir weiter.

▍ Eingabefeld mit Symbol


Hier ist ein Beispiel für ein Eingabefeld mit einem Symbol.


Eingabefeld mit einem Symbol

Solche Felder sind weit verbreitet. Wie rüste ich ein Feld mit einem Symbol aus? Was passiert, wenn ein solches Feld fokussiert wird? Erforschen Sie diese Probleme.

Hier ist der HTML-Code:

<p>
    <label for="name">Full name</label>
    <input type="text" id="name">
</p>

Ich glaube, die beste Lösung für dieses Problem ist die Verwendung von Hintergrundbildern, die durch CSS definiert wurden. Es ist einfach, schnell und erfordert keine zusätzlichen HTML-Elemente:

input {
    background-color: #fff;
    background-image: url('user.svg');
    background-size: 20px 20px;
    background-position: left 10px center;
    background-repeat: no-repeat;
}

Sie können ein URL-codiertes SVG-Bild verwenden, um die Farbe des Symbols zu ändern, wenn das Feld den Fokus erhält. Das ist sehr einfach. Dieses von Yoksel entwickelte Tool wurde beispielsweise für diesen Zweck entwickelt.

Hier ist ein Beispiel.

▍CSS-Stile zum Drucken


Ein Seitenbesucher muss es möglicherweise auf einem Drucker drucken. Angenommen, die Seite enthält ein kulinarisches Rezept, das Sie ausdrucken müssen, damit Sie in der Küche nicht ständig auf Ihr Telefon oder Ihren Computer schauen müssen.

Wenn das mit Bildern abgebildete Rezept Schritte enthält, ist es wichtig, dass sie in die gedruckte Version fallen. Andernfalls kann derjenige, der die Seite druckt, das Rezept nicht verwenden.

Versuchen Sie, keine Seiten aufzunehmen, die zum Drucken von Bildern vorgesehen sind, die im Hintergrund der CSS-Eigenschaft angezeigt werden


Wenn das Bild mithilfe der CSS-Eigenschaft in die Seite aufgenommen wird background, wird es nicht gedruckt. Die Stelle, an der es angezeigt wurde, ist beim Drucken leer. Das ist es, worüber ich spreche.


Leere Leerzeichen anstelle von Bildern, die mithilfe der CSS-Hintergrundeigenschaft auf der Seite enthalten sind.

Eine solche gedruckte Version des Rezepts wird nur wenig verwendet. Dies kann behoben werden, indem der Browser gezwungen wird, ähnliche Bilder in der Druckversion der Seite anzuzeigen. Dieser Ansatz funktioniert jedoch nicht in Firefox und im IE. So sieht es in CSS aus:

.element {
    background: url('cheesecake.png') center/cover no-repeat;
    -webkit-print-color-adjust: exact; /*        */
}

In solchen Situationen ist es am besten, ein HTML-Element zu verwenden <img>. Bilder, die mit diesem Element auf der Seite enthalten sind, werden problemlos gedruckt.

→ Hier ist ein Beispiel

Zusammenfassung


Heute haben wir über verschiedene Möglichkeiten gesprochen, Bilder in Webseiten aufzunehmen, ihre Vor- und Nachteile zu diskutieren und Szenarien für ihre Verwendung zu untersuchen. Wir hoffen, Sie finden es nützlich, was Sie heute gelernt haben.

Liebe Leser! Haben Sie Probleme beim Anzeigen von Bildern auf Webseiten?

More articles:


All Articles