Obróć obraz w źródle obrazu w html

Czy jest sposób, w jaki mógłbym dodać kod źródłowy mojego obrazu, który mógłby obracać mój obraz?

Coś takiego: 

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

Sprawiam, że moje obrazy stają się dynamiczne, więc zastanawiałem się, czy nie mogę dodać dodatkowego kodu, aby go obrócić, jeśli chcę.

Author: Mohammad Dehghan, 2013-11-19
Source

5 answers

Jeśli Twoje kąty obrotu są dość jednolite, możesz użyć CSS: 

<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);
}

W przeciwnym razie możesz to zrobić, ustawiając atrybut danych w HTML, a następnie używając Javascript, aby dodać odpowiednią stylizację: 

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

Przykładowe 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/

 65
Author: VLS,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-22 11:42:25

Możesz to zrobić: 

<img src="your image" style="transform:rotate(90deg);">
To jest o wiele łatwiejsze.
 5
Author: user9770563,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-10 12:28:45

Ten CSS wydaje się działać w Safari i Chrome: 

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

I w ciele: 

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

Ale to (irotate90 przykład powyżej) wypycha obrócony obraz wyżej na stronie niż gdyby nie został obrócony. Nie wiesz, jak kontrolować rozmieszczenie obrazu względem tekstu lub innych obróconych obrazów.

 1
Author: chuckkahn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-04 19:36:04

Istnieje wtyczka do tego z Javascript.

Sprawdź https://code.google.com/p/jqueryrotate / out.

 0
Author: Hozikimaru,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-19 02:35:43

To może być Twoje rozwiązanie bez skryptów: http://davidwalsh.name/css-transform-rotate

Jest obsługiwany we wszystkich przeglądarkach prefixed oraz, w IE10-11 i wszystkich nadal używanych wersjach Firefoksa, prefixed.

Oznacza to, że jeśli nie dbasz o stare IEs (zmorę projektantów stron internetowych), możesz pominąć prefiksy -ms- i -moz-, aby zaoszczędzić przestrzeń.

Jednak przeglądarki Webkit (Chrome, Safari, większość mobilnych nawigatorów) nadal potrzebują -webkit-, a nadal istnieje wielki Kult kontynuacją przed-następnej Opery i użyciem {[3] } jest sensate.

 0
Author: gchiconi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-19 02:43:33