Adapta una Imagen Responsive en Blogger
Al subir imágenes en tu entrada de Blog y lo colocas en tamaño grande, no se logran adaptar con un tamaño responsive en móvil. Sin embargo, el tamaño de la foto se distorsiona y no queda con buen diseño cierto.
En este blog te voy a desvelar como subir fotos a tu blog y que se adapte a cualquier pantalla. Solo con un simple código que deberás colocar en el diseño de tu plantilla.
Video Explicativo: Subir y adaptar imágenes a cualquier pantalla en Blogger
Código CSS para imágenes responsive
.post-body img {
width: 100%;
height: auto;
display: block;
}
Inserta código CSS en tu diseñador de plantilla
Copia el código y te diriges:
- abres tu cuenta blogger
- buscas Diseño
- Diseñador de temas
- Sección de Avanzado
- Colocas Añadir CSS
- pegas el código para que todas las imágenes se adapten perfectamente a cualquier pantalla.
¿Cómo saber si debo agregar este código CSS?
Debo resaltar que este código de línea CSS se agrega automáticamente al código HTML de Blogger. Esta línea CSS se agrega cuando la plantilla que usas no ajusta el tamaño adecuadamente al cambiar de pantalla. Si observas, las imágenes en una pantalla grande se adapta perfectamente por el amplio de la pantalla. Pero, al cambiar de vista a móvil la imagen se descuadra.
Por lo tanto, antes de usar una plantilla de blogger asegúrate que esta pueda ajustar automáticamente la imagen en responsive sin necesidad de colocar esta línea CSS a la plantilla. En caso que quieras usar la plantilla y no ajuste la imagen, ya deberás añadir el código css.
Borrar el código .post-body img
En caso que quieras borrar el codigo en la plantilla porque es probable que esta linea css no ajuste correctamente las imagenes a movil. Entonces, debes:
- Dirigirte a Tema
- Editar HTML
- Presionar Ctrl + f
- buscar la línea de código .post-body img
- borrar la línea css
- Guardar plantilla
Con esto te aseguras de tener nuevamente la plantilla por defecto tal como lo tenias al inicio.
Resumen:
Esta practica de ajustar las imágenes en blogger de forma responsive no es tan necesaria en algunas plantillas nuevas. Normalmente, las plantillas incluyen el código HTML para ajustar las imágenes responsive por defecto.
Muchos programadores o agencias han trabajado en las plantillas para optimizarlas lo mejor posible.