Bild drehen je nach Bildschirm-Größe

Ich versuche herauszufinden, wie dreht man ein Bild in ein div-je nach Bildschirmgröße.

Grundsätzlich gibt es dieses set bis:

<div> <div with arrow pointing right > <div>

in einem fluid Zeile (bootstrap) und ich muss den Pfeil Bild um 90 Grad drehen, um eine nach unten position, weil, wenn Sie in eine mobile die divs legen werden.

Ich dachte über die Verwendung einer leeren <div> - und ein background-image und media queries um das Bild zu ändern, aber dafür eine leere <div> mit set pixel Abmessungen ist nicht so toll (oder ist es?).

Anderen dachte, war eine <img> des Pfeils im inneren der <div> und vielleicht auch jQuery verwenden, um es zu drehen je nach Bildschirm-Größe, aber scheint OTT, und möglicherweise über mich, um herauszufinden, wie es zu tun.

Anregungen oder Hinweise wäre mehr als willkommen. Vielleicht bin ich etwas fehlt wirklich einfach.

InformationsquelleAutor alimacca | 2013-02-01
  1. 2

    Wenn Sie erstellen zwei getrennte, identische Elemente mit zwei verschiedenen Bilder, Sie könnten sich eine zu diplay auf eine Größe und ausblenden der anderen, und Umgekehrt.

    Beispiel:

    Html

    <img class="arrow" src="arrow.png" />
<img class="arrow90" src="arrow90.png" />

    Css

    .arrow{display:block;}
.arrow90{display:none;}

@media handheld, only screen and (max-width: 491px) {
    .arrow{display:none;}
    .arrow90{display:block;}
}
    • Also So einfach ist das! Manchmal Sie können nicht sehen den Wald für die Bäume! Vielen Dank Stuart! Sehr geschätzt für die einfache, schnelle Lösung. Ali.
    • Keine sorgen, bin froh, dass ich helfen konnte!
    InformationsquelleAutor Stuart
  2. 6

    Die Lösung von @Stuart funktioniert gut-hier ist eine andere Möglichkeit mit CSS. Dies ist nicht unbedingt eine bessere Antwort, nur anders.

    http://jsfiddle.net/panchroma/u4zWp/

    HTML

    <img src="../image1.jpg" class="rotateMobile">

    CSS 

    @media (max-width: 480px) {

.rotateMobile{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
}

    Glück!

    • Auch gut. Vielen Dank David. Die Qual der Wahl, jetzt, nicht wahr... 🙂
    • ... das ist ein gutes problem zu haben 😉
    InformationsquelleAutor David Taiaroa
Schreibe einen Kommentar