Rotation d'une image dans la source de l'image en html
y a-t-il un moyen que je puisse ajouter dans la source de mes codes d'image qui pourrait faire tourner mon image?
quelque Chose comme ceci:
<img id="image_canv" src="/image.png" rotate="90">
je rends mes images dynamiques, donc je me demandais si je pouvais ajouter du code supplémentaire pour le faire tourner si je le voulais.
5 réponses
si vos angles de rotation sont assez uniformes, vous pouvez utiliser 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);
}
sinon, vous pouvez le faire en définissant un attribut de données dans votre HTML, puis en utilisant Javascript pour ajouter le style nécessaire:
<img id="image_canv" src="/image.png" data-rotate="90">
Exemple de 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
});
});
Démo:
Vous pouvez faire ceci:
<img src="your image" style="transform:rotate(90deg);">
il est beaucoup plus facile.
div#div2
{
-webkit-transform:rotate(90deg); /* Chrome, Safari, Opera */
transform:rotate(90deg); /* Standard syntax */
}
et dans le corps:
<div id="div2"><img src="image.jpg" ></div>
Mais c' (et de la .rotate90 exemple ci-dessus) pousse l'image tournée plus haut sur la page que si elle n'était pas tournée. Pas sûr de savoir comment contrôler le placement de l'image par rapport au texte ou à d'autres images tournées.
Ce pourrait être votre script sans solution: http://davidwalsh.name/css-transform-rotate
il est pris en charge dans tous les navigateurs préfixés et, dans IE10-11 et toutes les versions encore utilisées de Firefox, non corrigé.
cela signifie que si vous ne vous souciez pas pour les anciens IEs (le fléau des web designers) vous pouvez sauter le -ms- et -moz- préfixes pour économiser de l'espace.
cependant, les navigateurs Webkit (Chrome, Safari, la plupart des navigateurs mobiles) ont encore besoin de -webkit-, et il y a encore un grand culte de pré - prochain opéra et en utilisant -o- est sensate.