18/9/14

Ajustar las imágenes automáticamente al tamaño de nuestro blog con CSS

Han sido varias personas ya las que me han preguntado cómo hacen en el blog Los Tragaldabas para poner las fotos de esa manera:


Así que he querido hacer un post explicandolo, así como otro sobre cómo hacerlo para ajustar las imágenes de manera autómatica por si puedo ayudar a más personas.

Primero vemos cómo lo hacen ellos, y luego cómo hacerlo de manera automática.

Eso sí, lo primero que quiero aclarar es que ese blog no lo he diseñado yo. Yo hago blogs casi tan bonitos o más, pero este no es mío. Por tanto, lo que digo es lo que yo pienso que hacen (estoy 99,9% segura, pero que quede esto a modo de disclaimer ;)

Fotos normales

En la captura de pantalla que os he mostrado de su blog se ven "dos" fotos verticales, ahora vamos a eso. Vamos a ver primero cómo hacerlo con una sola foto.

Fijaros en esta por ejemplo:


Como vemos es una foto apaisada grande.

¿Como consiguen poner una imagen tan grande en Blogger? Porque le dan a la opción tamaño original.

Blogger, cuando subimos una foto, nos da las siguientes opciones de tamaño: Pequeño - Mediano - Grande - Extra grande y Tamaño original

Yo en mi blog por ejemplo uso Extra grande. Lo que pasa cuando le damos a tamaño Extra grande es que Blogger redimensiona la imagen automáticamente de modo que su lado más grande mida 640 px.

De este modo si es una foto apaisada, se verá en el blog a 640 px de ancho; y de alto, lo que le corresponda proporcionalmente.

Sin embargo, si marcamos la opción Tamaño original, nos la deja al tamaño que mide la foto. La foto que hemos subido a Blogger.

Lo que hacen en el blog Los Tragaldabas es que suben la foto del tamaño que quieren que se vea en el blog (en este caso 1020 px de ancho) y luego le dan a la opción Tamaño original cuando están escribiendo el post.

De hecho podemos comprobar que su foto mide 1020 px (es más, guardaron la foto con el nombre "amapolas1020")

Fotos verticales dobles

La mayoría de las veces veréis que en lugar de una foto apaisada grande, como en el ejemplo de las amapolas, salen dos fotos. Esto no son dos fotos que han subido a Blogger y han puesto una al lado de otra, sino que es un collage de dos fotos.

¿Por qué entonces se ve el fondo del blog en el huequito entre las dos fotos? Porque es un collage sobre fondo transparente.

Podéis ver la foto de este ejemplo que he puesto que os he puesto arriba pinchando aquí. Si os ponéis sobre ella y le dais al botón derecho, tendréis una opción para guardar la foto en vuestro ordenador. Podéis entonces ver que es un collage con un huequito transparente.

¿Cómo hacer esto? En PicMonkey mismamente. Simplemente tenéis que poner en Spacing el espacio que queráis que haya entre las dos fotos (diría que en ese blog dejan unos 10 px) y luego darle al tic de Transparent background:


Deberéis tener ya la medida que necesitáis para vuestro blog y daros cuenta de que si dejáis 10 píxeles, 15, 20 o los que sean, entre las dos fotos, también estarán a los lados, pero esos no los necesitáis.

Es más, recomendaría recortarlos antes de subir la foto a Blogger, ¿ok?

Es decir, que si queréis una foto de 1.020 px de ancho y queréis dejar un huequito de 10 en medio, necesitáis dos fotos verticales de 505 de ancho ((1.020 - 10) / 2) = 505.

Cuando lo terminéis, vuestro collage medirá 1040, pero cuando le quitéis los 10 px sobrantes por la derecha y por la izquierda, entonces os quedará de 1020 que es lo que queríais.

Que nos lo haga Blogger de manera automática

En principio siempre sería conveniente que redimensionárais vuestras imágenes, porque si tenéis una réflex serán enormes. Incluso las de iPhone ya salen de por si a 3.000 y pico píxeles, y al final estáis usando espacio de fotos y ralentizando la carga de vuestro blog sin motivo alguno.

Pero imaginaos que en el futuro rediseñáis vuestro blog y queréis que las fotos se vean algo más grandes aún. Ahora queréis que se vean a 1.000 px y en el futuro queréis que se vean a 1.040 (esto aún no lo sabéis, es un supuesto). Bien, pues si ahora redimensionáis todas las fotos a 1.000 px y en el futuro modificáis el diseño o ancho de vuestro blog, las fotos os van a salir todas a 1.000, y deberéis sustituir todas una a una para que se vean más grandes.

Hacerlas más pequeñas es fácil, agrandarlas... pues no deberíamos si no queremos que se vean pixeladas.

De modo que, suponiendo que hayáis ya modificado el tamaño de la foto original a algo más razonable, para que Blogger os redimensione las imágenes directamente él, lo único que tenéis que hacer es añadir en CSS:

.post-body img {
max-width:1000px;
max-height:auto;
}

Sustituyendo el 1.000 por el número de píxeles que vosotras necesitéis para vuestro blog. 

Eso sí, tened siempre en cuenta que la foto es de suficiente calidad como para aguantar lo que ahí le pongáis. 

No podéis ponerle que queréis que la foto siempre mida 650 píxeles, 900 o incluso 1.020 y que luego subáis una foto que mida 500 px de ancho, o se verá pixelada, ¿ok?

Ah, y cuando escribáis el post, poned tamaño original. El CSS hará el resto del trabajo por vosotras :)

Mil besos y espero que os haya sido útil. Nos vemos el domingo, 
Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

43 comentarios

  1. ¡Genial! Me viene de lujo, porque justo ando rediseñando mi blog y cambiando el ancho, así que tenía que estar cambiando manualmente el ancho de las fotos... Muchísimas gracias, eres un sol.

    ResponderEliminar
    Respuestas
    1. Por cierto, Blanca, ¿cuál crees tú que es el ancho ideal para el blog? Es que según el ordenador en el que lo miro, se ve demasiado pequeño o demasiado grande y no sé de cuál fiarme... Como el mío trata de decoración y recetas, lo ideal es que la imagénes sean muy grandes, por eso las estoy subiendo a 970px, pero en algunos portátiles no se ven enteras :S


      El caso es que observo otros blogs que aparentemente no cambian de tamaño, siempre se ven bien, ¿es que hay algún truco que yo no conozco?

      Eliminar
    2. Yo estoy igual, rediseñando tengo una duda, el codigo que has puesto lo ponemos en cualquier lugar del css¿?

      Eliminar
  2. ¡Genial! Me has leído el pensamiento, justo estos días estaba pensándolo :) Gracias!!!!!

    ResponderEliminar
  3. Hola Blanca!
    Muchas gracias por el tutorial, la verdad es que lo de las fotos a veces supone un problema!
    Desde luego que nos haces la vida "blogueril" (bueno no sé si dece así jejej) mucho más fácil!!
    Gracias por compartir!

    ResponderEliminar
  4. Excelente! muy útil!
    compartido! ;)

    ResponderEliminar
  5. que bien!! otra cosa más que sabemos y que además viene genial. Mil gracias Blanca

    Besos

    ResponderEliminar
  6. Inncreible tutorial! Lo trataré de poner en práctica
    Mil gracias, un beso!!!

    ResponderEliminar
  7. Me ha servido de mucho este tuto, yo siempre me he preguntado como ponen las imagenes asi, ahora lo se. Lo empezare a aplicar en mi blog :).

    ResponderEliminar
  8. Muchas gracias, Blanca!! No sabía que se podía "automatizar" el tamaño de las fotos en las entradas... Me ha encantado!
    Un besito.

    ResponderEliminar
  9. Bienvenida Blanquita, cuánto tiempo sin leerte guapa. Un besito

    ResponderEliminar
  10. Yo lo que hago es ponerlas a tamaño extragrande (640 px) y como mi blog es un poco más ancho que eso, manualmente en la ventana de edición del html las subo a 680 y me llegan casi hasta el limite entre el espacio para posts y la barra lateral de blogger. También es otra opción para los que tienen un blog con barra lateral derecha en vez de una pantalla como la de Tragaldabas.

    ResponderEliminar
    Respuestas
    1. Hola Rebeca!

      Pues este tutorial es para hacer eso mismo que tu cambias en la vista HTML a 680, que lo tienes que hacer foto a foto en cada post que escribes, para que te lo haga automáticamente.

      El CSS lo que hace es que hace los cambios en cascada. O sea, que en lugar de hacerte el cambio a una foto (como cuando tu lo cambias en la vista html) te lo cambia en todas las fotos!

      Así te ahorras tener que hacerlo... :)

      Besote!

      Eliminar
  11. Con lo que me ayuda tu blog, y lo bien que me lo paso con tu temperamento y vehemencia, tengo que reconocer que soy una rácana dejando constancia de ello con comentarios.
    Este tutorial es tan bueno que lo necesitaba sin saberlo, que es lo máximo que se le puede pedir a un tutorial.
    Haces un gran trabajo y , cuando no estas, se te echa de menos.

    ResponderEliminar
  12. Gracias Blanca, lo pondré en práctica :)

    ResponderEliminar
  13. Gracias Blanca, lo pondré en práctica :)

    ResponderEliminar
  14. Qué curioso, yo siempre que las he querido cambiar lo he hecho a mano en cada foto; ni me había planteado que se pudiera hacer automáticamente. Mil gracias!

    ResponderEliminar
  15. Hola! Existe una manera de hacer lo mismo para los videos de youtube insertados que al usar la versión móvil del blog se ven gigantescos?

    ResponderEliminar
    Respuestas
    1. Hola Brigitte, te dejo el código para el video adaptable:

      CSS:
      .video-container {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px; height: 0; overflow: hidden;
      }

      .video-container iframe,
      .video-container object,
      .video-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      }

      HTML:
      En el html abres el div con la clase ".video-container" y dentro lo pegas el iframe del video y lo cierras el div. eso es todo.

      Espero te sirva. Saludos.

      Eliminar
  16. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  17. Hola blanca, yo tengo una duda y es que cuando pongo el codigo CSS ya me deja aplicarlo. Pero ahora me lo aplica a todas las fotos del blog, (menos a la barra lateral esa las deja intactas) y yo quisiera que se aplicara unicamente a la pagina de inicio u_u no se como hacer y ya e buscado en muchos tutoriales pero ninguno dice exactamente como hacerlo, te agradeceria mucho tu ayuda. Gracias de antemano

    ResponderEliminar
  18. Hola, Blanca, muchísimas gracias por este post. Llevaba tiempo tratando de saber cómo hacer esto para que mis fotos se vieran como las veo en muchos blog, grandes sin que Blogger, aún poniéndolas en 'extra grande', no me las dejará pequeñas. Este post, es genial y gracias por ayudarnos. Un saludo.

    ResponderEliminar
  19. Muchísimas gracias!! No sabes cómo necesitaba éste post!!voy a intentarlo inmediatamente

    ResponderEliminar
  20. Al principio no me funcionaba porque mi imagen estaba en "Extra grande", luego lo cambie a "Tamaño original" y me funcionó (mi imagen de 1130px encajó en proporción a 728px que es el ancho de entradas de mi blog). Muchas gracias por la ayuda.

    ResponderEliminar
  21. Qué buen post!
    Pero tengo una duda, qué puedo agregarle al código para eliminal los márgenes laterales a las fotos?
    Espero tu respuesta, gracias!! <3

    ResponderEliminar
  22. Guau, ¡muchas gracias, hacía tiempo que buscaba un tutorial como este para las imágenes de mi blog!

    ResponderEliminar
  23. Llevaba tiempo queriendo hacer esto y no sabía como ¡qué ilusión! Pero ahora tengo un problemilla: hay una foto, la del apartado "sobre mi" que quisiera un tamaño distinto. ¿Sabes cono podría hacerlo?
    Gracias!!!

    ResponderEliminar
  24. Hola. Gracias por tus posts, me ha servido mucho uno sobre cómo reducir el espacio entre los gadgets. Quiero preguntarte algo: quiero poner una imagen arriba y de la cabecera y ya lo he logrado; lo que quiero hacer ahora es que esa imagen se extienda al ancho de la pantalla, es posible hacerlo? Sabes si se puede? Tienes un post sobre eso? Muchas gracias, espero me puedas ayudar. Saludos desde Colombia.

    ResponderEliminar
  25. Muchas gracias, me ha servido de mucha ayuda! aunke he tenido que calcular el tamaño de mi blog porquenno me cuadraba con esas medidas, pero gracias! ;)

    ResponderEliminar
  26. Gracias Blanca, eres un Crak! Mi problema era el contrario elegí un ancho de blog demasiado grade y no sabia como modificarlo. Toquitear todas las fotos una por una... Pufff. Me acabas de salvar la vida!!!

    ResponderEliminar
  27. Ahhh. ahora me queda ajustar la cabecera. Voy a seguir buscando por tu blog ;P

    ResponderEliminar
  28. Muchisimas gracias Blanca!! Antes redimensionaba cada foto, ahora es un paseo!! Me quitaste un peso de encima!
    Saludos ;o)

    ResponderEliminar
  29. disculpa tambien sirve para lo alto ?

    ResponderEliminar
  30. Si todas mis fotos están puestas en tamaño extra grande y ahora quiero ajustarlas para que todas las fotos de portada se vean del mismo tamaño de forma automática, cómo hago? Desde ya muchas gracias!

    ResponderEliminar
  31. Gracias, pero a mi no me funciono. Las fotos siguen igual, al parecer no todas las plantillas aceptan ese css.

    ResponderEliminar
  32. Muuuuuchas gracias por tan valiosa información. Saludos

    ResponderEliminar
  33. Una pregunta Blanca ¿Dónde añado ese código? La verdad es que no sé donde está el CSS. Gracias

    ResponderEliminar
  34. Tengo una web de salud de Frutas Antioxidantes en donde he implementado el codigo y me funciona a la perfeccion, te felicito por tan excelente blog que tiene y tus valiosos aportes que compartes desisteresadamente con nosotros, saludos desde colombia.

    ResponderEliminar
  35. Aunque no puedo decir lo mismo que me haya funcionado en ora web de Peliculas Online Latino puesto que la plantilla parece que no se adapta a ese cod, aun asi muchas gracias me funciono en el anterior.

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.