Imágenes con todo el ancho del post

27.9.14

A veces las fotos en el blog nos vuelven locos! Que si una mide 1024 píxeles de ancho, la otra 900px, otra 1400px porqué la has recortado... un calvario!

Y tu lo que quieres solamente es hacer que todas las foto ocupen todo el ancho de la entrada, pero no hay manera.

Además… ¿te has fijado que en Blogger muchas veces las fotos no se colocan centradas sino que están un poco más a la derecha de lo que te gustaría?

Ya verás que es uno de esos tutoriales que te preguntarás cómo es que no lo habías hecho antes. Es más que sencillo y super corto!



¿Cómo hago que todas las imágenes de los posts ocupen todo el ancho?


Simplemente ve a Plantilla --> Personalizar --> Avanzado --> Añadir CSS   y pega el siguiente código



  .post-body img {
      width: 100%;
      height: auto;

      margin-left: -20px;
  }




Te explico para qué sirve cada línea:

  • widht: 100% --> indicas que el ancho de la foto ocupe todo el ancho de la entrada.
  • height: auto --> la altura de la foto será proporcional a la altura que tenía antes, por lo tanto no deformarás la foto al hacerla más ancha!
  • margin-left: -20px --> Aquí mueves la foto 20 píxeles hacia la izquierda. En algunas de las plantillas de Blogger lo necesitarás y en otras no. Prueba a ver cómo queda con esta línea y si la foto te queda demasiado a la izquierda, borra simplemente la línea de código.

Ahora cada vez que pongas una foto en tus entradas, ocupará todo el ancho del post. Ten en cuenta que se hará automáticamente para todas las fotos que pongas!

Espero que te haya gustado!

Laura

¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.