Imágenes Responsive en Blogger

Antes podíamos agregar un estilo a la plantilla para que las imágenes tuvieran como medida en el width (ancho) 100%, pero las últimas actualizaciones de Blogger no están dejando ni siquiera agregar un condicional.

Para corregir esto podemos aplicar el width="100%" diretamente en las imágenes que vayamos a publicar.




Esto permitirá que la imagen se ajuste al máximo posible en el espacio que está ubicada, de tal forma que ya no se tendrá el problema de que la imagen se visualice bien en la PC pero no en los dispositivos móviles. Lógicamente este consejo es para las páginas que usan la vista «Ordenador» en los dispositivos móviles. Un ejemplo, Charkleons.com, se visualiza igual en las pc y en los dispositivos móviles.

El procedimiento es muy sencillo, primero debemos subir la imagen en modo redactar para dejarla en su tamaño original, esto permitirá que la imagen se visualice con la mayor resolución y calidad. La imagen automáticamente toma un tamaño grande o pequeño, para dejarle el tamaño original debemos hacer clic sobre ella y elegir esa opción.

También podemos hacer clic sobre la parte de «Propiedades» para agregarle un texto que describa a la imagen. Luego pasamos a modo HTML y retiramos las partes que determinan la alineación de la imagen y su tamaño, un ejemplo de un código completo a continuación y en colores lo que debemos retirar.

<div class="separator" style="clear: both; text-align: center;">
<a href="URL QUE REDIRECCIONA A LA IMAGEN" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Imagen RESPONSIVE en Blogger - Charkleons.com" border="0" data-original-height="900" data-original-width="1600" src="URL DE LA IMAGEN" title="Imagen RESPONSIVE en Blogger - Charkleons.com" /></a></div>

Como notarán quedó solo la parte del width="1600", ese 1600 para este caso, lo cambiamos por 100% y esto es lo que hará que la imagen tome el 100% del espacio donde está ubicada, de esta forma se visualizará igual en la PC y en los dispositivos móviles.

Hago un paréntesis para que visites «Cómo adaptar tu blog para diferentes resoluciones de pantalla» te será muy útil y es un complemento para este tema.

Sigo, se puede dejar solo la medida del width no es necesario dejar la del heigth, los navegadores lo definen automáticamente. El código en HTML de la imagen con el width="100%" quedaría así:
---------------------------
<div class="separator" style="clear: both; text-align: center;">
<a href="URL QUE REDIRECCIONA A LA IMAGEN"><img alt="Imagen RESPONSIVE en Blogger - Charkleons.com" width="100%" src="URL DE LA IMAGEN" title="Imagen RESPONSIVE en Blogger - Charkleons.com" /></a></div>
---------------------------
Es importante que no quede algo sobrando, por ejemplo el guión que estaba pegado al width o una comilla extra.

Luego de hacer esto notarán que la imagen ocupará el máximo del espacio donde esté ubicada, pero sobretodo, que en los dispositivos móviles también lo hará.

Espero que esta información les sea muy útil.

Gracias.

Las imágenes se ven muy grandes en el celular blogger, cómo hago para que las imágenes no se vean tan grandes en el celular, la imagen no toma el ancho que le dejo en el celular, las imágenes tapan las columnas de mi blog, las imágenes son muy grandes y tapan otras partes de mi página, imágenes en blogger que se ajusten a los celulares, cómo hago para que las imágenes se vean bien en los celulares, hacer que la imagen se ajuste al celular, código para que la imagen se ajuste en los celulares,