Wenn ein Bild breiter als die Hauptinhaltsspalte ist, was auf kleineren Bildschirmen häufig vorkommt, wird es in DevSite automatisch auf die Breite der Spalte begrenzt. Wenn für das Bild jedoch sowohl das Attribut width als auch das Attribut height festgelegt ist, wird nur die Breite angepasst, was zu einer Verzerrung des Bildes führt. Legen Sie daher keine height für das Bild fest. Das bedeutet, dass die Seite möglicherweise neu gezeichnet wird, wenn das Bild langsam geladen wird, was zu einem Sprung führt. Das ist aber besser als ein Bild, das nicht auf dem Bildschirm passt.
Sie können class="screenshot" auf ein Bild anwenden, um ihm einen Rahmen zu geben, der es von Text in der Nähe abhebt. Dies wird in der Regel für Screenshots mit weißem Hintergrund verwendet, die sonst auf der Seite untergehen würden. Verwenden Sie sie nicht für Bilder, für die sie nicht erforderlich ist.
Neben dem Text schweben
Das Bild rechts enthält auch class="attempt-right". Dadurch wird das Bild auf größeren Bildschirmen rechts platziert, auf kleineren Bildschirmen (Tablets und kleiner) jedoch in ein vertikales Layout gezwungen, da ein Floating-Rechts zu Problemen führen würde. Auch class="attempt-left" ist verfügbar. Wenn Sie attempt-left und attempt-right zusammen verwenden möchten, muss das attempt-left-Element zuerst kommen.
Wenn die Bilder frei flottieren, dürfen sie 50% der Spaltenbreite nicht überschreiten. Andernfalls werden sie neu skaliert.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Sie können dieselben Klassen auch für andere Elemente verwenden, z. B. für ein <figure>, das sowohl ein Bild als auch eine Bildunterschrift enthält:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Text, der frei im Layout positioniert ist, löschen
Wenn Sie verhindern möchten, dass Text um ein freiliegendes Element herum umgebrochen wird und in seiner ursprünglichen Breite angezeigt wird, können Sie den betroffenen Elementen, die dem freiliegenden Element folgen, die Klasse clear hinzufügen.
<p class="clear">Hello world.</p>
Beispiel mit der Klasse „clear“
In diesem Beispiel enthält der zweite Absatz eine clear-Klasse.
Dieser Absatz umschließt das freiliegende Bild. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dieser Absatz hat eine eindeutige Klasse und wird nicht um das freiliegende Bild herum umgebrochen. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Beispiel ohne die Klasse „clear“
In diesem Beispiel umfließen beide Absätze das freiliegende Bild.
Dieser Absatz umschließt das freiliegende Bild. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dieser Absatz umschließt das freiliegende Bild. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Bilder im dunklen Design
DevSite bietet eine kleine Auswahl an Klassennamen, die auf Bilder angewendet werden können, um ihr Aussehen zu ändern, wenn das dunkle Design aktiviert ist.
Verdunkelung von Bildern
Im dunklen Design sind standardmäßig alle Bilder mit Ausnahme von SVG-Dateien etwas abgedunkelt.
Wenn Sie die standardmäßige Verdunkelung eines Bilds entfernen möchten, wenn das dunkle Design aktiviert ist, fügen Sie dem Bild eine Klasse ohne Filter hinzu:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Bild invertieren
Fügen Sie Bildern mit einer schwarzen oder dunklen monochromen Farbpalette die Klasse invert hinzu, damit sie im dunklen Design weiß/hell angezeigt werden:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Fügen Sie auf einer _index.yaml-Seite dem Feld classname für ein Zeilenelement invert hinzu:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Separates Bild für dunkle Designvariante
Wenn Sie ein separates Bild bereitstellen möchten, das nur angezeigt wird, wenn das dunkle Design aktiviert ist, schließen Sie das vorhandene <img>-Element in ein <picture>-Element ein und fügen Sie ein <source>-Element für die Variante im dunklen Design hinzu.
Im folgenden Beispiel befinden sich zwei SVG-Dateien für das Google-Logo in einem <picture>-Element. Wenn das dunkle Design deaktiviert ist, wird die Bilddatei im Element <img> angezeigt, die das Wortlogo mit den vier Google-Markenfarben enthält. Wenn das dunkle Design aktiviert ist, wird die Bilddatei im <source>-Element angezeigt. Das Wortbild ist dabei vollständig weiß und hat keine Markenfarben.
Beispiel
Code
<picture>
<source
srcset="/devsite/images/google-dark-theme.svg"
media="(prefers-color-scheme: dark)"
class="devsite-dark-theme"
alt="">
<img src="/devsite/images/google.svg" alt="">
</picture>
Hinweise
Da das dunkle Design über ein Feature-Flag aktiviert wird, beachten Sie Folgendes zu den Attributen des Elements <source>:
Das <source>-Element muss eine devsite-dark-theme-Klasse enthalten, die dem Frontend der DevSite einen Hook zum Aktualisieren des Medienattributs und seines Werts entsprechend der vom Nutzer ausgewählten Option für das dunkle Design bietet: light, dark oder device.
Das Attribut „media“ muss den Wert einer (prefers-color-scheme: dark)-Medienabfrage enthalten.
Wenn Sie bereits <source>-Elemente mit media-Abfragen im Medienattribut haben, fügen Sie die vorhandenen Medienabfragen entweder mit „and (prefers-color-scheme: dark)“ an oder fügen Sie ein neues <source>-Element hinzu, dessen Medienattributwert (prefers-color-scheme: dark) ist. Die media-Abfrage und ihr Wert werden je nach ausgewählter Option für das dunkle Design entfernt oder ersetzt.
Der Dateiname des Bilds für die dunkle Designvariante im Attribut srcset kann zwar technisch gesehen beliebig sein, es wird jedoch empfohlen, dem Dateinamen des vorhandenen Bilds -dark-theme anzuhängen.