Source: https://www.oloblogger.com/2008/12/imagenes-con-ancho-variable.html
Timestamp: 2018-09-21 21:16:44+00:00

Document:
Imagenes con ancho variable | Oloblogger
Estás en: Home » Trucos » Imagenes con ancho variable
Imagenes con ancho variable | Oloblogger 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 we...
Imagenes con ancho variable
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:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_0eC4K-qZ7AM/ST1o6LY4EhI/AAAAAAAAFdo/X51iYraxPSE/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="http://4.bp.blogspot.com/_0eC4K-qZ7AM/ST1o6LY4EhI/AAAAAAAAFdo/X51iYraxPSE/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!
Agustín 9/12/08 0:23
Estupendo!! Es (casi) lo que necesitaba :-S ¿Cómo se aplicaría esta propiedad concretamente a la imagen de la cabecera??
Es 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í?
Agustín 9/12/08 11:22
Arreglado. Al final lo he cambiado de sitio y ya está. Mucho más fácil.
mojul8 9/12/08 23:17
hola oloman, antes estaba suscrito a tu blob por correo pero ahora no me llegan!!!
donde me puedo volver a suscribir???
Fali 10/12/08 9:15
Saludos en el Día mundial de comenarios Blog.
Agustín 10/12/08 15:43
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í??
Oloman 11/12/08 23:51
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í.
No 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.
Agustín 12/12/08 0:55
Ok, lo de que salga en el editor era más curiosidad que otra cosa la verdad.
Y 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.
Jaime Trujillo Escobedo 12/12/08 15:09
Hola Oloman, muy buen truco y muy bien explicado, saludos y feliz Navidad! :)
Anónimo 13/12/08 3:06
Que tal Oloman!! en que parte encuentro esos codigos???
KIKELIN 13/12/08 11:10
Vale, lo estudio.
Oloman 15/12/08 23:38
El YayyO: Es el código que sale automáticamente cuando subes una imagen a Blogger.
Jaime y Kikelin... y resto de lectores: ¡FELIZ NAVIDAD!
Juan Taloneta 26/3/09 23:50
No entiendo bien como puedo poner una imagen variable en la cabecera. Agradecería que nos lo pudieras explicar.
Oloman 30/3/09 22:08
Hola Juan Taloneta.
En 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.
Juan Taloneta 31/3/09 15:36
Muchas gracias por tu respuesta, me quedó bien claro el tema. Saludos
Anónimo 31/8/09 21:21
Primero 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.
Oloman 31/8/09 21:34
Echa un vistazo a tu CSS Gxux...
Me parece que ese width:100%; hace que las imágenes que carecen de medida concreta se expandan hasta el ancho disponible.
Fezz. 26/9/10 9:26
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!!
Oloman 28/9/10 1:39
Fezz, 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.
Fezz. 28/9/10 18:33
Gracias 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!!
www.papeldoll.blogspot.com
Oloman 29/9/10 1:28
¡No tengo ni idea! Bueno, alguna idea sí, pero no sé si será eso.
Las 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é ;)
David Pepe 24/9/12 6:49
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.
Oloman Oloman 25/9/12 0:11
Mi código está un poco guarrindongo, pero hay va la pista:
Busca en mi código fuente "**** MEDIA ****"

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución