• Articles
• admin

von Christopher Heng, thesitewizard.com

Ein Besucher fragte mich, wie er ein Bild so drehen könnte, dass es vertikal angezeigt wirdwenn jemand seine Webseite auf einem Mobiltelefon betrachtete. Das heißt, er wollte, dass das Bild in seiner üblichen gezeigt wirdausrichtung, mit der längeren Seite horizontal, auf einem Desktop- oder Laptop-Computer, aber auf einem Telefon gedreht, so ist eslängere Seite ist jetzt vertikal.

Präambel

• Dieser Artikel befasst sich mit einem Bild, das auf Computermonitoren und Mobiltelefonen anders angezeigt werden muss. Wenn Sie ein Bild einfach dauerhaft drehen möchten, sodass es sich immer an dieser Position befindet, unabhängig davon, wie es angezeigt wird, sollten Sie einfach animage editor verwenden, um dies zu tun. Es ist viel einfacher und effizienter und vermeidet die Probleme, die auftreten, wenn Sie CSS dazu bringen, die Rotation für Sie durchzuführen.

• Eine Alternative zum Drehen eines Bildes besteht darin, es an die Breite eines Mobiltelefonbildschirms anzupassen. Mostwebsites tun es auf diese Weise. Wenn Sie das bevorzugen, lesen Sie bitte, wie Sie Ihre Bilder stattdessen mobilfreundlich gestalten können (Responsive Design). Ich habe auch einen Artikel, der Zeigtsie können Bilder auf einer Website einblenden, wenn sie auf einem Mobiltelefon angezeigt werden.

• Mein Besucher hatte eine Website, die das von theMobile-FriendlyLayout Wizard generierte 2-Spalten-Layout verwendete, aber Sie können die unten beschriebenen Techniken auch auf einer Website verwenden, die mit einem Layout entworfen wurde, das selbst erstellt oder von einem anderen Ort bezogen wurde. Das heißt, die Methode ist eine allgemeine, die verwendet werden kannunabhängig davon, wie Sie die Site entworfen haben.

• Offensichtlich setzt dieser Artikel voraus, dass Sie bereits eine Website haben. Wenn nicht, beginnen Sie bitte mit der Anleitung zum Erstellen einer Website.Sie können jederzeit zu diesem Artikel zurückkehren, um die Feinabstimmung vorzunehmen, nachdem Sie das grundlegende Design erstellt haben.

So drehen Sie ein Bild in CSS

Angenommen, Sie haben ein Bild mit der ID „demo_picture“. Verwenden Sie zum Drehen das folgende CSS.

Wenn Ihr Bild dadurch in die falsche Richtung gedreht wird, verwenden Sie stattdessen rotate(90deg). Wie Sie vielleicht erraten haben, können Sie jeden beliebigen Winkel verwenden. Meine Verwendung von 270 und 90 Grad ist weilDas Thema ist, es so zu drehen, dass seine Länge jetzt die Höhe ist und umgekehrt.

Wenn Sie jedoch einfach den obigen Code verwenden, werden Sie schnell ein Problem feststellen. Das Bild dreht sich um einen Punkt in seiner Mitte („Mitte“, wenn Sie eine andere englische Variante verwenden). Dies bedeutet, dass das gedrehte Bild den Inhalt darüber und darunter überlappt.

An diesem Punkt werden Sie wahrscheinlich denken: „Hmm. Das ist leicht zu lösen. Ich lege das Bild einfach in einen eigenen DIV-Block mit einer festen Höhe, die genügend Platz für das gedrehte Bild bietet.“

Wenn ein Bild also eine Breite von (sagen wir) 202 Pixel und eine Höhe von 42 Pixel hat, sieht der HTML-Code ungefähr so aus:

Und das CSS, um dem DIV-Block die erforderliche Höhe zu geben, lautet:

Wenn Sie den Code unverändert verwenden, werden Sie leider feststellen, dass das gedrehte Bild, während der Container die erforderliche Höhe hat, immer noch den Absatz darüber überlappt, während unten eine große Lücke verbleibt, da es sich um seine Mitte dreht, während es im Wesentlichen dort bleibt, wo es war.

Der Trick besteht darin, die ursprüngliche Position vor dem Drehen so anzupassen, dass die endgültige Ausgabe an der richtigen Stelle ist. Um sicherzustellen, dass das gedrehte Ergebnis keinen Text darüber abdeckt, sondern quadratisch liegtin dem dafür zugewiesenen DIV-Block müssen wir ihn um einen Abstand von (width - height)/2nach unten verschieben (wobei „/“ das Teilungszeichen darstellt). Sie können diese Berechnung einfach manuell durchführen und die Ergebnisse in das CSS einfügen, oder, wenn Sie eine Aufzeichnung darüber hinterlassen möchten, wie Sie die endgültige Nummer erhalten haben, lassen Sie den Browser die Berechnung für Sie mit „calc((202px - 42px)/2)“ durchführen. Sie müssen natürlich die Zahlen in solche ändern, die für Ihr Bild geeignet sind. Ich werde die Funktion calc() in diesem Tutorial verwenden, damit klarer wird, wie ich zum Ergebnis gekommen bin.

Das Ändern der oberen Position kann auf verschiedene Arten erfolgen, z. B. mit einer margin-top -Regel oder, wenn Sie die Tranform-Funktionen weiterhin verwenden möchten, mit translateY().

Das folgende Beispiel verwendet margin-top:

Der folgende Code verwendet eine Transformationsfunktion:

Wenn Sie translateY() verwenden, stellen Sie sicher, dass die Übersetzung vor der Rotation erfolgt, da die Reihenfolge der Vorgänge von Bedeutung ist.

Das Demo-Bild oben hatte seine obere Position mit margin-top angepasst und gedreht, wobei der zuvor beschriebene genaue Code verwendet wurde. Aber wie gesagt, Sie können jede gewünschte CSS-Positionierungsmethode verwenden.

So drehen Sie das Bild nur, wenn es auf einem Mobiltelefon oder einem kleinen Bildschirm angezeigt wird

An dieser Stelle werden Sie wahrscheinlich denken, dass Sie die Drehung nur ausführen müssen, wenn das Bild auf einem kleinen Bildschirm angezeigt wird Gerät wie ein Mobiltelefon, Alles, was Sie tun müssen, ist, die Regeln im Abschnitt @media für dieses Gerät zu platzieren.

Das stimmt. Bis zu einem Punkt. Wenn Sie es tun, ohne weitere Maßnahmen zu ergreifen, werden Sie probablyencounter noch ein weiteres Problem. Mobilfreundliche Stylesheets haben normalerweise Regeln wie die folgenden:

Diese Regel passt die Größe großer Bilder so an, dass sie auf kleine Bildschirme passen. Dies ist der richtige Ansatz, es sei denn, Sie möchten nicht, dass die Größe des Bildes geändert, sondern gedreht wird. Mit der obigen allgemeinen Regel wird die Größe des Bildes vom Browser geändert, bevor es gedreht wird. Es wird auchwerfen Sie Ihre margin-top (oder translateY oder was auch immer) Berechnungen ab, da das Bild nicht mehr seine ursprünglichen Abmessungen hat.

Um dies zu beheben, fügen Sie „max-width: none;“ zu den „#demo_picture“ -Regeln hinzu.

In diesem Sinne können wir alle Regeln, die wir bisher gesammelt haben, zum Stylesheet hinzufügen.

Angenommen, Sie haben Ihre Seite basierend auf einer vom Layout-Assistenten generierten Vorlage erstellt und 629 Pixel als Punkt ausgewählt, an dem sie in den einspaltigen Modus für Mobilgeräte wechselt phones.In fügen Sie in einem solchen Fall die Regeln direkt nach der Zeile „@media“ in die Datei „styles.css“ ein.

Wenn Sie den Layout-Assistenten nicht verwendet haben und sich auch nicht sicher sind, wie Sie Ihren eigenen @media -Abschnitt erstellen könnenfür Geräte mit kleinem Bildschirm lesen Siewie man eine mobilfreundliche Website erstellt: Responsive Design in CSS zuerst. Kopieren Sie den obigen Code nicht blind.

Beachten Sie, dass Sie die Seite auf einem Telefon (oder einem Desktop-Browserfenster, dessen Größe geändert wurde, um eines nachzuahmen) testen müssen.Abhängig von der Breite und Höhe Ihres Bildes können Sie feststellen, dass die Ergebnisse weniger als erfreulich sind. Zum Beispiel, wenn das Bild groß ist, können Sie die endgültige Ausgabe finden partiallyclipped auf der rechten Seite des Mobiltelefons zu sein. Wenn ja, setzen Sie ein „margin-left“ auf Ihr Bild mit einer entsprechenden Nummer, um es nach links zu verschieben. (Tipp: Verwenden Sie negative Zahlen inmargin-left, um das Bild über seine ursprünglichen Grenzen hinaus nach links zu verschieben.)

Browserkompatibilität

Die Transformationsfunktionen sind in allen modernen Browsern verfügbar. Wenn Ihre Besucher den Internet Explorer verwenden (der mittlerweile veraltet ist), benötigen sie mindestens Version 9.

Urheberrecht © 2020 Christopher Heng. Alle Rechte vorbehalten.
Erhalten Sie weitere kostenlose Tipps und Artikel wie diesen zu Webdesign, Werbung, Einnahmen und Skripten von https://www.thesitewizard.com/.

Finden Sie diesen Artikel nützlich? Sie können neue Artikel und Skripte lernen, die onthesitewizard veröffentlicht werden.comby Abonnieren des RSS-Feeds. Zeigen Sie einfach Ihren RSS-Feed-Reader oder einen Browser, der RSS-Feeds unterstützt, aufhttps://www.thesitewizard.com/thesitewizard.XML.Weitere Informationen zum Abonnieren von toRSS-Site-Feeds finden Sie in meinen RSS-FAQ.

Bitte diesen Artikel nicht nachdrucken

Dieser Artikel ist urheberrechtlich geschützt. Bitte reproduzieren oder verteilen Sie diesen Artikel weder ganz noch teilweise in irgendeiner Form.

• So dehnen Sie ein Hintergrundbild, um die gesamte Website (oder eine Spalte davon) auszufüllen (HTML / CSS)
• So zentrieren Sie einen DIV-Block mit CSS
• So zentrieren Sie ein Bild mit CSS
• So erstellen Sie eine rechteckige Box für Ihren Text / Ihre Bilder mit CSS
• So erstellen Sie abgerundete Ecken für Ihre Box Grenzen in CSS
• So fügen Sie einen Tooltip in HTML / CSS hinzu (kein JavaScript erforderlich)
• So registrieren Sie Ihren eigenen Domainnamen
• Können Sie einen Domainnamen direkt bei ICANN registrieren, anstatt über einen Zwischenhändler?

Neue Artikel

• So geben Sie alternativen Zeilen einer Tabelle eine andere Farbe (HTML / CSS)
• So generieren Sie das kostenlose Let’s Encrypt SSL-Zertifikat auf Ihrem eigenen (Windows-) Computer
• So fügen Sie mit BlueGriffon Meta-Tags in eine Webseite ein
• Wie man eine Song (oder ein anderer Audioclip) aus einer Liste auf einer Website
• So zeichnen Sie eine horizontale Linie auf einer Webseite mit Expression Web
• So erstellen Sie eine Website kostenlos
• Warum kann ich keine gewünschte Domain erstellen? Gibt es eine Möglichkeit, einen Registrar ganz abzuschaffen?
• Was ist der Unterschied zwischen einem Domainnamen-Registrar und einem Webhost?
• So erstellen Sie eine mobilfreundliche Website: Responsive Design in CSS
• Was ist der Unterschied zwischen einem Content Management System (CMS), einem Blog, einem Webeditor und einem Online-Site Builder?

Beliebte Artikel

• So erstellen Sie ein Blog
• So erstellen / erstellen Sie eine Website: Der AZ-Leitfaden für Anfänger
• Tipps zur Auswahl eines guten Domainnamens
• Expression Web Tutorial: So entwerfen Sie eine Website mit Microsoft Expression Web
• Dreamweaver Tutorial: So entwerfen Sie eine Website mit Dreamweaver CS6
• BlueGriffon Tutorial: So entwerfen Sie eine Website mit BlueGriffon 3
• So entwerfen und veröffentlichen Sie Ihre Website mit KompoZer (kostenloser WYSIWYG-Webeditor)
• Kostenloser Feedback- / Kontaktformularassistent

So verlinken Sie auf diese Seite

Es wird auf Ihrer Seite angezeigt als:

So drehen Sie ein Bild auf einer Website, wenn es auf einem Mobiltelefon angezeigt wird (CSS)