Muchos tenemos blogs con ancho variable, cuyo diseño permite que el contenido se ajuste a la resolución de pantalla del visitante. Si la web contiene principalmente texto, el asunto no da mayor problema, pero si se publican habitualmente imágenes, el asunto de expandir a lo ancho las entradas, puede provocar que nuestra maquetación descuadre bastante, provocando que nuestro cuidado diseño se estropee.
La expresión más habitual de este caso se dará con la cabecera. Si por ejemplo diseñamos una de 1024px y usamos plantilla con ancho variable, en resoluciones de ese ancho se verá perfecta, tal y como la diseñamos.
Sin embargo, si el usuario tiene una resolución de por ejemplo 1244px, las entradas se expandirán, la cabecera no al ser una imagen y lo que verá será algo parecido a esto...
En el otro extremos un usuario con pantalla de 800px, verá perfectamente "encogidas" las entradas y sin embargo verá la imagen truncada a ese ancho...
Para arreglar esto, podemos usar también un porcentaje en el ancho de la imagen.
Esta imagen lleva el código normal que inserta Blogger al mostrar una imagen, que con el tamaño grande nos la muestra con 400px de ancho:
Bien, ahora cogemos el código en Edición de HTML y cambiamos lo siguiente:
O sea, sustituimos los 400px por un 100%, eliminamos el atributo HEIGHT y su valor y por último, llamamos a la imagen original (s1600) en lugar de llamar a la miniatura "grande" (s400) -ver Alojamiento de Imágenes en Blogger-
Lo que estamos haciendo es acudir a la mejor resolución que tenemos y luego escalarla con WIDTH=100%; para mostrarla al mayor tamaño posible dentro de nuestra entrada. Usando el botón RESTAURAR de vuestro navegador y ampliando o encogiendo la ventana, podreis comprobar cómo esta imagen que ya incluye el tanto por ciento, se adapta al ancho del espacio destinado para el post.
Sólo existe un problema con esto y es cuando usamos imágenes más pequeñas que la posible máxima resolución del usuario. La imagen anterior tiene 1100px de ancho, por lo que, contando con lo que resta la barra/s lateral/es, normalmente no llegará a expandirse del todo en casi ningún diseño. Supongamos ahora una imagen de 500px que se pueda llegar a ensanchar por encima de esta medida en pantallas de 1024px o más. Esto provocaría una pérdida de resolución y se vería bastante chunga.
Para solucionar esto, tendríamos que utilizar junto con WIDTH en tanto por ciento, el atributo CSS MAX-WIDTH. Esta instrucción fija un máximo hasta el cual ensanchar.
Esta sería la imagen sólo con un WIDTH=100%; tal y como se ha explicado anteriormente. Al ampliar, se ve un poco borrosa.
Esta otra incluiría en la etiqueta STYLE, además del WIDTH=100%; un MAX-WIDTH:500PX; para no perder nada de calidad y expandir sólo hasta su tamaño máximo original:
Haced la prueba ensanchando y encogiendo vuestra ventana... ¡pero sólo lo podreis ver si teneis una resolución superior a 800px!
La expresión más habitual de este caso se dará con la cabecera. Si por ejemplo diseñamos una de 1024px y usamos plantilla con ancho variable, en resoluciones de ese ancho se verá perfecta, tal y como la diseñamos.
Sin embargo, si el usuario tiene una resolución de por ejemplo 1244px, las entradas se expandirán, la cabecera no al ser una imagen y lo que verá será algo parecido a esto...
En el otro extremos un usuario con pantalla de 800px, verá perfectamente "encogidas" las entradas y sin embargo verá la imagen truncada a ese ancho...
Para arreglar esto, podemos usar también un porcentaje en el ancho de la imagen.
Esta imagen lleva el código normal que inserta Blogger al mostrar una imagen, que con el tamaño grande nos la muestra con 400px de ancho:
Bien, ahora cogemos el código en Edición de HTML y cambiamos lo siguiente:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQK9cCoMTnIWqLBPflrvm0_j201-_bz9pPBEoPaOlNPrrIg9LEqlijw_1A33Cb_q6bZDVbqkE1rztGrUuzozAEziVm7Nx_Bzo-nNo6uDuwUWlzl86JOg6cDpvTqh1KuvJ9vICg2HTMEXWc/s1600-h/Tropical.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100%;400px; height: 323px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQK9cCoMTnIWqLBPflrvm0_j201-_bz9pPBEoPaOlNPrrIg9LEqlijw_1A33Cb_q6bZDVbqkE1rztGrUuzozAEziVm7Nx_Bzo-nNo6uDuwUWlzl86JOg6cDpvTqh1KuvJ9vICg2HTMEXWc/s1600400/Tropical.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5277489687046918674" /></a>
O sea, sustituimos los 400px por un 100%, eliminamos el atributo HEIGHT y su valor y por último, llamamos a la imagen original (s1600) en lugar de llamar a la miniatura "grande" (s400) -ver Alojamiento de Imágenes en Blogger-
Lo que estamos haciendo es acudir a la mejor resolución que tenemos y luego escalarla con WIDTH=100%; para mostrarla al mayor tamaño posible dentro de nuestra entrada. Usando el botón RESTAURAR de vuestro navegador y ampliando o encogiendo la ventana, podreis comprobar cómo esta imagen que ya incluye el tanto por ciento, se adapta al ancho del espacio destinado para el post.
Sólo existe un problema con esto y es cuando usamos imágenes más pequeñas que la posible máxima resolución del usuario. La imagen anterior tiene 1100px de ancho, por lo que, contando con lo que resta la barra/s lateral/es, normalmente no llegará a expandirse del todo en casi ningún diseño. Supongamos ahora una imagen de 500px que se pueda llegar a ensanchar por encima de esta medida en pantallas de 1024px o más. Esto provocaría una pérdida de resolución y se vería bastante chunga.
Para solucionar esto, tendríamos que utilizar junto con WIDTH en tanto por ciento, el atributo CSS MAX-WIDTH. Esta instrucción fija un máximo hasta el cual ensanchar.
Esta sería la imagen sólo con un WIDTH=100%; tal y como se ha explicado anteriormente. Al ampliar, se ve un poco borrosa.
Esta otra incluiría en la etiqueta STYLE, además del WIDTH=100%; un MAX-WIDTH:500PX; para no perder nada de calidad y expandir sólo hasta su tamaño máximo original:
Haced la prueba ensanchando y encogiendo vuestra ventana... ¡pero sólo lo podreis ver si teneis una resolución superior a 800px!
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Estupendo!! Es (casi) lo que necesitaba :-S ¿Cómo se aplicaría esta propiedad concretamente a la imagen de la cabecera??
ResponderEliminarEs decir, yo tengo la imagen puesta en la parte del css, en el header-wrapper como un "background: url(http://...);" ¿hay forma de aplicar esa propiedad ahí?
Arreglado. Al final lo he cambiado de sitio y ya está. Mucho más fácil.
ResponderEliminarMuchas gracias por todo! :-)
hola oloman, antes estaba suscrito a tu blob por correo pero ahora no me llegan!!!
ResponderEliminardonde me puedo volver a suscribir???
un saludo
Saludos en el Día mundial de comenarios Blog.
ResponderEliminarFali
Hola de nuevo Oloman. Oye un tema...al haber cambiado de lugar la cabecera (ahora la tengo dentro de un div que he creado dentro del header-wrapper, entre las etiquetas "body") la imagen también me aparece en la pestaña de diseño/elementos de la página, ¿hay forma de evitar que salga ahí??
ResponderEliminarSaludos!!
Tal como lo has hecho no, pero no lo cambies porque es la forma más adecuada. La pestaña que dices es precisamente dónde se ve de manera gráfica, la estructura de tu blog. No hay inconveniente en que esté ahí.
ResponderEliminarNo sé si es que tendrás algún problema que no explicas.
De todas formas ya vi que te quedó bien lo de la cabecera. Además, aunque no lo expliqué, pusiste una altura fija para que no te variara ese parámetro al expandir/contraer. A mi personalmente me gusta que se escalen ambas dimensiones, pero en el dibujo que tienes ahora, la verdad es que no pierde... estéticamente hablando.
Ok, lo de que salga en el editor era más curiosidad que otra cosa la verdad.
ResponderEliminarY en cuento a la imagen que tengo de cabecera pues...es provisional (me apetecía aprender a hacer cesped más que nada jajaja); cuando tenga ya la buena y sabiendo lo que explicas aquí...ya me pienso cómo funcionará mejor.
Saludos!
Hola Oloman, muy buen truco y muy bien explicado, saludos y feliz Navidad! :)
ResponderEliminarQue tal Oloman!! en que parte encuentro esos codigos???
ResponderEliminarVale, lo estudio.
ResponderEliminarEl YayyO: Es el código que sale automáticamente cuando subes una imagen a Blogger.
ResponderEliminarJaime y Kikelin... y resto de lectores: ¡FELIZ NAVIDAD!
Hola.
ResponderEliminarNo entiendo bien como puedo poner una imagen variable en la cabecera. Agradecería que nos lo pudieras explicar.
Saludos.
Hola Juan Taloneta.
ResponderEliminarEn Blogger, la cabecera funciona como gadget. Lo más fácil es eliminar ese artilugio y luego añadir uno nuevo tipo HTML, desplazándolo posteriormente hasta el lugar deseado (normalmente encima de las entradas).
El nuevo elemento debería incorporar un WIDTH:100%; según se explica en este post.
Muchas gracias por tu respuesta, me quedó bien claro el tema. Saludos
ResponderEliminarHola Oloman!!
ResponderEliminarPrimero gracias por toda la ayuda que nos das..
Cuando tengas tiempo y te apetezca, podrias pasarte por mi blog?
Tengo un problemilla y es que el tamaño de mis imagenes y videos se adapta al ancho de la entrada y esto a veces las distorsiona. no se como arreglar esto.
Un saludo y gracias de antemano.
Echa un vistazo a tu CSS Gxux...
ResponderEliminar.post img { padding: 0; width: 100%; text-align:left; display: block; padding: 3px; border: solid 1px #f2f2f2; }
Me parece que ese width:100%; hace que las imágenes que carecen de medida concreta se expandan hasta el ancho disponible.
Hola un pregunta! pude hacer que las imagenes aumentaran de tamaño solo cambiandoles los codigos de una por una, habra una forma de que todas las imagenes que se suban queden del tamaño máximo? no se en el diseño del blog o donde?? espero mi pregunta sea clara gracias!!
ResponderEliminarFezz, no sé qué editor usas, pero en el actual (nuevo editor), después de subir la imagen, si pinchas en ella desde la pestaña REDACTAR, puedes escoger fácilmente el tamaño de la imagen a insertar en el post. Y si te refieres a mostrar un tamaño determinado por defecto, sin hacer esto manualmente, te tengo que decir que no conozco la manera.
ResponderEliminarGracias solo una duda mas!! Puse las imágenes del tamaño mas grande posible todo funciono bien, pero había una que estaba en vertical en mi ordenador se ve normal, pero en mi móvil se ve infinitamente larga hacia abajo es normal te dejo el link de mi blog!! Muchísimas gracias siempre había querido poner mus imágenes mas grandes!!
ResponderEliminarwww.papeldoll.blogspot.com
¡No tengo ni idea! Bueno, alguna idea sí, pero no sé si será eso.
ResponderEliminarLas conexiones de los móviles son lentas y si ahora usas imágenes más grandes, puede ser normal que tarde en cargarlas. Como además esto se hace línea a línea, puede ser que estés intentando ver lo que todavía no se ha cargado y parezca una imagen infinita... Pero repito: no sé ;)
hola que tal, muy bonito blog, me esta sirviendo, y tu diseño me parece fantástico, lo estoy tratando de hacer, y tengo una pregunta, al minimizar la pantalla se borra la barra lateral, y queda solo el contenido, es lo que quiero hacer ¿como le haces que se borre esa divicion? Espero me respondas, o me puedas decir en donde esta la solución; es lo único que me falta.
ResponderEliminarMi código está un poco guarrindongo, pero hay va la pista:
EliminarBusca en mi código fuente "**** MEDIA ****"