HTML 5 Bild adaptiver Bildschirm img proportionaler Skalierungscode für Webseite HTML XNUMX

Aufgrund des boomenden mobilen InternetsWeChat MarketingDie Popularität von Mobiltelefonen ist gewordenLebenunverzichtbares Werkzeug.

eine Webseite bauenVorlage, es wird empfohlen, sie zu verwendenWordPressAdaptives Design für:

Was bedeutet CSS-Bildanpassung?

Die Selbstanpassung von CSS-Bildern bezieht sich auf die Erstellung der Bilder in der HTML-Webseite durch CSS-Code:

Nächster,Chen WeiliangIch werde Ihnen den proportionalen Skalierungscode für CSS img ^_^ mitteilen

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 ▼

Was ist der Unterschied zwischen der CSS-Selektorklasse und der ID? id- und Klassenverwendung in HTML

Was ist der Unterschied zwischen der CSS-Selektorklasse und der ID? Die Verwendung von ID und Klasse in HTML Chen Weiliang führt derzeit SEO durch und optimiert das WordPress-Theme der Website.Ich habe mir zwar schon einige grundlegende HTML- und CSS-Kenntnisse angeeignet, aber ich habe es eine Weile nicht mehr bedient, insbesondere den CSS-Teil ...

Wie spielt die mobile Website MP4-Videos ab, die sich an die Seite anpassen?Bitte klicken Sie auf den Link unten ▼

Wie passt sich die H5-Webseite MP4 an die Seite an? Die mobile Website spielt Video-HTML-Code ab

Videomarketing ist ein integraler Bestandteil des Online-Marketings: Viele Praktiker der Online-Werbung verwenden häufig Videos in Kombination mit „viralem Marketing“, um den Traffic zu steigern.Wenn WeChat-Marketing mit Videomarketing kombiniert wird, kann es die Conversion-Rate von Texten für neue Medien und sozialen E-Commerce weiter verbessern.Ich habe viele Freunde...