• Articles
• admin

por Christopher Heng, thesitewizard.com

Un visitante me preguntó cómo podía girar una imagen para que se mostrara verticalmente cuando alguien veía su página web en un teléfono móvil. Es decir, quería que la imagen se mostrara en su orientación habitual, con el lado más largo horizontal, en una computadora de escritorio o portátil, pero girado en un teléfono, por lo que el lado más largo ahora es vertical.

Preámbulo

• Este artículo trata de una imagen que debe mostrarse de manera diferente en los monitores de computadora y los teléfonos móviles. Si simplemente desea rotar una imagen de forma permanente para que siempre esté en esa posición, independientemente de cómo se vea, solo debe usar animage editorpara hacerlo. Es mucho más simple y eficiente, y evita los problemas que surgen cuando obtiene CSS para la rotación por usted.

• Una alternativa a la rotación de una imagen es reducirla para que se ajuste al ancho de la pantalla de un teléfono móvil. La mayoría de los sitios web lo hacen de esa manera. Si lo prefiere, lea Cómo Hacer que Sus Imágenes sean Compatibles con dispositivos Móviles (Diseño Receptivo) en su lugar. También tengo un artículo que te muestra cómo ocultar imágenes en un sitio web cuando se ve en un teléfono móvil.

• Mi visitante tenía un sitio web que usaba el diseño de 2 columnas generado por el Asistente de diseño móvil, pero también puede usar las técnicas descritas a continuación en un sitio web diseñado usando cualquier diseño, creado por sí mismo u obtenido de otro lugar. Es decir, el método es general y se puede utilizar independientemente de cómo diseñaste el sitio.

• Obviamente, este artículo presupone que ya tienes un sitio web. Si no es así, comience con la guía sobre Cómo crear un sitio web.Siempre puede volver a este artículo para afinar las cosas después de terminar el diseño básico.

Cómo rotar una imagen en CSS

Supongamos que tiene una imagen con un id de «demo_picture». Para rotarlo, utilice el siguiente CSS.

Si esto gira la imagen en la dirección incorrecta, use rotate(90deg) en su lugar. Como habrás adivinado, puedes usar cualquier ángulo que quieras. Mi uso de 270 y 90 grados se debe a que el tema en cuestión es girarlo para que su longitud sea ahora la altura y viceversa.

Sin embargo, si simplemente usa el código anterior, notará rápidamente un problema. La imagen gira alrededor de un punto en su centro («centro» si utilizas una variante diferente del inglés). Esto significa que la imagen girada se superpondrá al contenido de arriba y de abajo.

En este punto, probablemente pensarás, » Hmm. Es fácil de resolver. Pondré la imagen en su propio bloque DIV con una altura fija que da suficiente espacio para la imagen girada.»

Entonces, para que una imagen tenga un ancho de (digamos) 202 píxeles y una altura de 42 píxeles, el HTML se verá algo como esto:

Y el CSS para dar al bloque DIV la altura necesaria es:

Desafortunadamente, si usa el código tal cual,encontrará que mientras el contenedor tiene la altura requerida, la imagen girada seguirá superponiéndose al párrafo anterior, dejando un gran espacio debajo, ya que pivota en su centro, mientras permanece esencialmente donde estaba.

El truco es ajustar su posición original antes de girarla, de modo que la salida final esté en el lugar correcto. Para asegurarnos de que el resultado girado no cubre ningún texto de arriba, sino que se encuentra cuadrado en el bloque DIV asignado para él, necesitamos moverlo a una distancia igual a (width - height)/2hacia abajo (donde «/» representa el signo de división). Puede realizar fácilmente este cálculo manualmente y poner los resultados en el CSS,o, si desea dejar un registro de cómo obtuvo el número final, deje que el navegador haga el cálculo por usted, con «calc((202px - 42px)/2)«. Por supuesto, tendrá que cambiar los números a los adecuados para su imagen. Usaré la función calc() en este tutorial para que quede más claro cómo llegué al resultado.

Cambiar la posición superior se puede hacer de varias maneras, por ejemplo, con una regla margin-top, o si prefiere continuar usando las funciones de transformación, con translateY().

El siguiente ejemplo utiliza margin-top:

El siguiente código utiliza una función de transformación:

Si elige utilizar translateY(), asegúrese de que la traducción se realiza antes de la traducción, ya que el orden de las operaciones es significativo.

La imagen de demostración de arriba tenía su posición superior ajustada con margin-top y girada, utilizando el código exacto descrito anteriormente. Pero como dije, puedes usar cualquier método de posicionamiento CSS que desees.

Cómo girar la imagen Solo Cuando se ve en un Teléfono móvil o una pantalla pequeña

En este punto, probablemente pensará que para realizar la rotación solo cuando la imagen se ve en un dispositivo de pantalla pequeña como un teléfono móvil, todo lo que necesita hacer es colocar las reglas en la sección @mediapara ese dispositivo.

Eso es cierto. A un punto. Si lo hace sin tomar ninguna otra medida, probablemente encontrará otro problema. Las hojas de estilo compatibles con dispositivos móviles suelen tener reglas como las siguientes:

Esta regla cambia el tamaño de las imágenes grandes para que quepan en pantallas pequeñas. Este es el enfoque correcto,excepto cuando en realidad no desea que la imagen se redimensione sino que se gire. Con la regla general anterior, el navegador redimensiona la imagen antes de girarla, que no es lo que desea aquí. También generará sus cálculos margin-top (o translateY o lo que sea), ya que la imagen ya no tendrá sus dimensiones originales.

Para solucionarlo, agregue «max-width: none; «a las reglas» #demo_picture«.

Con esto en mente, podemos agregar todas las reglas que hemos acumulado hasta ahora a la hoja de estilos.

Supongamos que ha creado su página basada en una plantilla generada por el Asistente de despliegue y ha elegido 629 píxeles como punto donde cambia a su modo de una columna para dispositivos móviles phones.In en tal caso, inserte las reglas justo después de la línea «@media «en el archivo» styles.css«.

Si no utilizó el Asistente de diseño y tampoco está seguro de cómo crear su propia sección @media para dispositivos de pantalla pequeña, lea Cómo crear un sitio web compatible con dispositivos móviles: Diseño responsivo en CSS primero. No copie ciegamente el código anterior.

Tenga en cuenta que tendrá que probar la página en un teléfono (o una ventana de navegador de escritorio redimensionada para imitar una).Dependiendo del ancho y la altura de la imagen, es posible que los resultados no sean agradables. Por ejemplo, si la imagen es grande, es posible que la salida final se corte parcialmente en el lado derecho del teléfono móvil. Si es así, establezca un «margin-left » en su imagen con un número apropiado para moverla a la izquierda. (Consejo: utilice números negativos enmargin-left para mover la imagen hacia la izquierda más allá de sus límites originales.)

Compatibilidad con navegadores

Las funciones de transformación están disponibles en todos los navegadores modernos. Si sus visitantes usan Internet Explorer (que ahora está obsoleto), necesitarán al menos la versión 9.

Copyright © 2020 Christopher Heng. Todos los derechos reservados.
Obtenga más consejos y artículos gratuitos como este,sobre diseño web, promoción, ingresos y scripting, desde https://www.thesitewizard.com/.

¿Te parece útil este artículo? Puede aprender de los nuevos artículos y scripts que se publican en el tesitewizard.comby se suscribe al feed RSS. Simplemente apunte su lector de fuentes RSS o un navegador que admita fuentes RSS ahttps://www.thesitewizard.com/ thesitewizard.XML.Puedes leer más sobre cómo suscribir los feeds del sitio de toRSS desde mis preguntas frecuentes de RSS.

Por favor, No vuelva a imprimir Este artículo

Este artículo tiene derechos de autor. Por favor, no reproduzca ni distribuya este artículo en su totalidad o en parte, de ninguna forma.

• Cómo Estirar una Imagen de Fondo para Llenar Todo el Sitio Web (o una Columna de él) (HTML/CSS)
• Cómo Centrar un Bloque DIV con CSS
• Cómo Centrar una Imagen con CSS
• Cómo Crear un Cuadro Rectangular para Contener Su Texto/Imágenes con CSS
• Bordes de caja en CSS
• Cómo Agregar una información sobre herramientas en HTML/CSS (No se necesita JavaScript)
• Cómo Registrar su Propio Nombre de dominio
• ¿Puede registrar un nombre de dominio directamente con ICANN en lugar de a través de un intermediario?

Nuevos artículos

• Cómo Dar Filas Alternativas de una Tabla de un Color Diferente (HTML/CSS)
• Cómo Generar el Certificado SSL Let’s Encrypt Gratuito en Su Propio Ordenador (Windows)
• Cómo Insertar Meta Etiquetas en una Página Web con BlueGriffon
• Cómo Jugar una Canción (o Algún Otro Clip de Audio) de una Lista en un Sitio Web
• Cómo Dibujar una Línea Horizontal en una Página Web con Expression Web
• Cómo Crear un Sitio Web de Forma Gratuita
• ¿Por qué No Puedo Crear el Dominio Que Quiero? ¿Hay alguna Manera de Eliminar a un Registrador Por Completo?
• ¿Cuál es la Diferencia entre un Registrador de Nombres de Dominio y un Host Web?
• Cómo crear un Sitio Web Compatible con dispositivos móviles: Diseño Adaptable en CSS
• ¿Cuál es la Diferencia Entre un Sistema de Gestión de Contenidos (CMS), un Blog, un Editor Web y un Creador de Sitios en Línea?

Artículos populares

• Cómo crear un Blog
• Cómo Crear / Crear un Sitio Web: Guía de la A a la Z para Principiantes
• Consejos para Elegir un buen Nombre de dominio
• Tutorial de Expresión Web: Cómo Diseñar un sitio web con Microsoft Expression Web
• Tutorial de Dreamweaver: Cómo Diseñar un sitio web con Dreamweaver CS6
• Tutorial de BlueGriffon: Cómo Diseñar un sitio web con BlueGriffon 3
• Cómo Diseñar y Publicar su sitio web con KompoZer (editor web WYSIWYG gratuito)

Cómo Enlazar a esta página

Aparecerá en su página como:

Cómo Rotar una Imagen en un sitio web Cuando se ve en un Teléfono móvil (CSS)