Drehen Sie ein Bild in der Bildquelle in HTML

76

Gibt es eine Möglichkeit, die Quelle meiner Bildcodes hinzuzufügen, um mein Bild zu drehen?

Etwas wie das:

<img id="image_canv" src="/image.png" rotate="90">

Ich mache meine Bilder dynamisch und habe mich gefragt, ob ich zusätzlichen Code anhängen könnte, um sie zu drehen, wenn ich möchte.

html image rotation src marchemike
quelle
Ist es möglich, mein Produktbild vom Backend zu drehen, als wäre ich ein importiertes Produktbild als Landschaft, die ich als Hochformat drehen muss.
Gem

Antworten:

100

Wenn Ihre Drehwinkel ziemlich gleichmäßig sind, können Sie CSS verwenden:

<img id="image_canv" src="/image.png" class="rotate90">

CSS:

.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Andernfalls können Sie dies tun, indem Sie ein Datenattribut in Ihrem HTML-Code festlegen und dann mithilfe von Javascript das erforderliche Styling hinzufügen:

<img id="image_canv" src="/image.png" data-rotate="90">

Beispiel jQuery:

$('img').each(function() {
    var deg = $(this).data('rotate') || 0;
    var rotate = 'rotate(' + deg + 'deg)';
    $(this).css({ 
        '-webkit-transform': rotate,
        '-moz-transform': rotate,
        '-o-transform': rotate,
        '-ms-transform': rotate,
        'transform': rotate 
    });
});

Demo:

http://jsfiddle.net/verashn/6rRnd/5/

VLS
quelle
Ich habe nach einer anderen Möglichkeit gesucht, das Bild durch den Server zu drehen, da ich versuche, das Bild zuzuschneiden, und wenn ich Webkit-Transformation oder jqueryrotate verwende, scheint es ein Problem mit meinem Cropper zu geben, also hoffte ich, dass ich es könnte Laden Sie das Bild gedreht.
Marchemike
Können Sie mehr Kontext und / oder ein Beispiel bereitstellen?
VLS
63

Du kannst das:

<img src="your image" style="transform:rotate(90deg);">

es ist viel einfacher.

user9770563
quelle
<img src = "Image.jpeg" style = "transformieren: drehen (90 Grad);">
user9770563
2
Die einfachste und einfachste Lösung wirklich :) Danke
Shahin
4

Dieses CSS scheint in Safari und Chrome zu funktionieren:

div#div2
{
-webkit-transform:rotate(90deg); /* Chrome, Safari, Opera */
transform:rotate(90deg); /* Standard syntax */
}

und im Körper:

<div id="div2"><img src="image.jpg"  ></div>

Dies (und das obige .rotate90-Beispiel oben) drückt das gedrehte Bild jedoch höher auf die Seite, als wenn es nicht gedreht wäre. Sie sind sich nicht sicher, wie Sie die Platzierung des Bildes relativ zu Text oder anderen gedrehten Bildern steuern sollen.

Chuckkahn
quelle
Fügen Sie dem zu drehenden Objekt "style =" z-index: 1 "und dem Text oder dem, was Sie oben anzeigen möchten, style =" z-index: 2 "(oder eine beliebige Zahl über 1) hinzu.
user3241874
1

Dies könnte Ihre skriptfreie Lösung sein: http://davidwalsh.name/css-transform-rotate

Es wird in allen Browsern mit Präfix und in IE10-11 und allen noch verwendeten Firefox-Versionen ohne Präfix unterstützt.

Das heißt, wenn Sie sich nicht für alte IEs (den Fluch der Webdesigner) interessieren, können Sie die Präfixe -ms-und überspringen -moz-, um Platz zu sparen.

Die Webkit-Browser (Chrome, Safari, die meisten mobilen Navigatoren) werden jedoch weiterhin benötigt -webkit-, und es gibt immer noch eine große Kultfolge von Pre-Next Opera, und die Verwendung -o-ist sensibel.

gchiconi
quelle