Hay una manera de que yo pueda agregar en la fuente de mi imagen de códigos que podrían girar mi imagen?

Algo como esto:

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

Estoy haciendo mis imágenes dinámicas, así que me preguntaba si yo podría añadir código adicional para girar, si yo quiero a.

  • Es posible rotar mis productos de imagen de back-end, como estoy a los productos importados, así como una imagen de paisaje necesito girar como un retrato.
InformationsquelleAutor marchemike | 2013-11-19

4 Comentarios

  1. 79

    Si sus ángulos de rotación son bastante uniforme, puede utilizar 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);
    }

    De lo contrario, usted puede hacer esto mediante el establecimiento de un atributo de datos en el HTML, a continuación, utilizar Javascript para añadir la necesaria estilo:

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

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

    Demo:

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

    • Yo estaba un poco en busca de otro camino para girar la imagen a través del servidor, porque estoy tratando de recortar la imagen, y cuando puedo usar webkit transformar o jqueryrotate, no parece ser un problema con mi cropper, así que tenía la esperanza de que yo pueda cargar la imagen girada.
    • Puede usted dar más contexto y/o un ejemplo?
  2. 25

    Usted puede hacer esto:

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

    es mucho más fácil.

    • <img src=»Image.jpeg» style=»transform:rotate(90deg);»>
    • La forma más fácil y más sencilla solución realmente 🙂 Gracias
  3. 2

    Este CSS parece que funciona en Safari y Chrome:

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

    y en el cuerpo:

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

    Pero esto (y el .rotate90 ejemplo anterior) empuja la imagen rotada a la parte de arriba de la página, que si se fueron sin rotar. No está seguro de cómo controlar la colocación de la imagen con respecto al texto o resto de imágenes giradas.

    • El uso de margin-top trabajará para mover la imagen hacia abajo.
  4. 0

    Esta podría ser su script gratis solución: http://davidwalsh.name/css-transform-rotate

    Es compatible en todos los navegadores prefijo y, en IE10-11 y todos los que aún usan versiones de Firefox, unprefixed.

    Que significa que si usted no se preocupan por edad Erótico (la pesadilla de los diseñadores web) se puede omitir el -ms- y -moz- prefijos para economizar espacio.

    Sin embargo, los navegadores Webkit (Chrome, Safari, la mayoría de los navegadores) todavía necesitan -webkit-, y hay un gran culto de los siguientes pre-al Lado de la Ópera y el uso de -o- es sensate.

Dejar respuesta

Please enter your comment!
Please enter your name here