Artikelverzeichnis
Mit der rasanten Entwicklung des mobilen Internets und der weitverbreiteten Nutzung von WeChat-Marketing sind Mobiltelefone zu einem unverzichtbaren Werkzeug im Leben geworden.
Für Website -Vorlagen empfehlen wir die Verwendung responsiver WordPress -Themes:
- Wenn der WordPress-Theme-Entwickler beim Entwerfen der WordPress-Theme-Seite den adaptiven HTML 5-Bildbildschirm nicht gut gemacht hat ...
- Wenn Sie die Website auf einem mobilen Gerät durchsuchen, wird es eine sehr hässliche Bildverschiebung geben, und die Benutzererfahrung ist extrem schlecht!
Was bedeutet CSS-Bildanpassung?
Die Selbstanpassung von CSS-Bildern bezieht sich auf die Erstellung der Bilder in der HTML-Webseite durch CSS-Code:
- Passen Sie sich automatisch an die Breite und Höhe verschiedener Geräte an.
- Das img-Tag wird automatisch proportional skaliert.
Als Nächstes wird Chen Weiliang Ihnen den CSS-Code zum proportionalen Skalieren der Bildgröße vorstellen. ^_^
Anpassungscode für CSS-Bildhöhe und -breite
Bild in HTML einfügen:
Wenn Sie möchten, dass sich das Bild an die geringe Größe des Bildschirms anpasst, anstatt in Breite und Höhe festgelegt zu bleiben.
Sie können den folgenden Code zur style.css-Datei Ihres WordPress-Themes hinzufügen ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }Aussage hiermax-widthMaximale Breitenregel
- um sicherzustellen, dass alle Bilder mit maximal 100% angezeigt werden (d.h. sie können nur so groß wie ihre eigenen Bilder angezeigt werden).
- Wenn an diesem Punkt das Element, das das Bild enthält (z. B. der Körper oder das div, das das Bild enthält), kleiner als die dem Bild innewohnende Breite ist, wird das Bild so skaliert, dass es den maximal verfügbaren Platz ausfüllt.
width:auto;bedeutet automatische Breite
\9 Es ist eine Art, Hack-CSS zu schreiben.
- Auf diese Weise wird dem normalen CSS-Code "\9" hinzugefügt, nur der IE-Browser kann es erkennen, andere Browser ignorieren diese Anweisung.
- Dadurch wird eine Browserunterscheidung erreicht, die den Zweck kompatibler Browser ermöglicht.
Warum nicht Breite verwenden: 100 %?
Um eine automatische Skalierung von Bildern zu erreichen, können Sie auch die häufiger verwendeten Breiteneigenschaften verwenden, z.width：100％.
Diese Regel gilt hier jedoch nicht.
- Weil diese Regel es so breit erscheinen lässt wie sein Container.
- In Fällen, in denen der Container viel breiter als das Bild ist, wird das Bild unnötig gestreckt.
注意 事项
Was sind CSS-Selektoren? Was ist der Unterschied zwischen class und id?In den folgenden Tutorials geht es um ▼
Wie spielt die mobile Website MP4-Videos ab, die sich an die Seite anpassen?Bitte klicken Sie auf den Link unten ▼
Hoffentlich ist Ihnen der Artikel „HTML 5 Image Resizing Code for Adapting to Screen Size and Proportional Size in Web Pages“, der auf Chen Weiliangs Blog ( https://www.chenweiliang.com/ ) veröffentlicht wurde, hilfreich.
Sie können den Link zu diesem Artikel gerne teilen: https://www.chenweiliang.com/cwl-964.html