Imagenes Elastica con Max-width definido

[chichote]

Hola muchachos(as) de FDW.

Tengo un problemon y no se como resolverlo, haber si me hechan una manito.

Resulta que estoy armando un sitio en donde las imagenes de cierta seccion (#content, cabe mencionar que este contenedor es elastico y se adapta al tamaño de la pantalla) deben ser elasticas, en un principio todas las imagenes serian de 750px, por lo que cree el siguiente css:

#content img{
margin-bottom:30px;
max-width:750px;
min-width:350px;
width:90%;
}


hasta ahi todo bien.

PERO, siempre existe un pero XD, ahora me sale otro requerimiento, las imagenes no siempre seran de 750px, es posible que ingresen imagenes mas pequeñas, entonces si suben una imagen de 400px con la regla css que creé la imagen se va a 750px y obviamente se pixela.

Entonces lo que necesito es que siga funcionando a 90% para que sea elastica pero que el Max-width sea el tamaño original la imagen.


Alguien tiene alguna idea? se lo agradecería mucho.

Saludos.

Chichote.

[cristian_cena]

Solución solo css no se me ocurre pero: Podrías crear dos clases css (en una estableces el max-width en 750 y en la otra lo pones en 400) y asignarlas al elemento img html según su width. Es decir, detectar el width de la imagen mediante javascript y usando un condicional if-else rellenar el atributo class de la imagen.

Ojalá te sea de ayuda. Saludos

[pzin]

Si, dado que CSS no puede averiguar el tamaño de la imagen a menos que lo indiques en el HTML —pero entonces ya no puedes aplicarle medidas porque prevalece la regla del embebida en el HTML— tienes que usar alguna otra cosa como javascript.



Aunque yo contestaba más bien por esto.

Iniciado por chichote

haber si me hechan una manito

A ver si me echan una manita.

A ver si vamos a tener que entrar aquí con dedos ahogados en preservativos para evitar enfermedades de transmisión textual.

[furoya]

¡Noooo! ¡Tre-men-do!

Es así, tal cual. ¡Y yo también digo "manito"! (y no soy mejicano, así que no lo uso como aféresis de "hermanito").

Ahora que me hacés pensar, creo que la confusión viene porque "mano" es femenina, pero termina en "o", que suele ser terminación masculina. Pero la gradación igual sería

diminutivo → manita, manecita.
positivo → mano.
aumentativo → manaza, manota.

Lo curioso es que a nadie se lo ocurrió decir "manazo"; ni como acción. Porque un golpe de mano sería un "manotazo".





¿Eh? ¡Ah, sí, chichote! Coincido con las opiniones anteriores. Me gustaría que mediaquery resolviese el problema, pero creo que no lo hace, y hay que recurrir a JS. Tal vez en la misma etiqueta, aprovechando el onload.

Si nadie encuentra un modo aquí, se puede mover el tema para darle vueltas a

Código:

<img src="imagen.gif" onload="this.className= (this.offsetWidth > 400)? 'grande' : 'chica';" >

Donde grande y chica son las dos clases a asignar.

O, en vez de darle vueltas, escribir algo mejor (que teniendo en cuenta al autor, seguro va a ser muy fácil).

[pzin]

Eres como la conciencia posteada del fiel narrador de La Naranja Mecánica.

[mariogl84]

Es probable que esté diciendo una tontería como un camión, pero ¿no lo podrías resolver así?

Código:

#content img { 
    margin-bottom:30px;
    max-width:90%; 
    min-width:350px;
}

Por lo que entiendo, lo que quieres es que cualquier imagen, tenga las dimensiones que tenga, sea elástica y nunca sea ni más ancha que su tamaño original ni más estrecha de 350px.

El planteamiento es: no le establezcas ningún width, ella se pondrá a su tamaño original siempre que su contenedor le deje espacio; si el contenedor no le deja espacio, se irá escalando (mediante el max-width:90%); si llega a 350px, no se escalará más. Claro que esta solución no está probada en IE, todo hay que decirlo.

¿Qué pensáis?

[pzin]

Iniciado por mariogl84

Es probable que esté diciendo una tontería como un camión, pero ¿no lo podrías resolver así?

min-width:350px;

si llega a 350px, no se escalará más.

Mi no comprender.

Si llega a 350px, ¿qué supuesta regla evita que siga escalando?

El problema no es no escalar una imagen —que sería con max-width—, el problema es no escalar una y las demás si. Es decir, habría que poner dos reglas, pero entonces para saber cual es para cada imagen, o pones un chino entre <head> y </head> y vaya repartiendo clases, o tiras de Javascript. Y Javascript suele estar más alcance.

Supongo que no habrás entendido o te liaste tú solo.

[furoya]

Iniciado por Bonez

Eres como la conciencia posteada del fiel narrador de La Naranja Mecánica.

¿No tenías un personaje mejor para compararme?

Iniciado por Bonez

Mi no comprender.

Si llega a 350px, ¿qué supuesta regla evita que siga escalando?

Ninguna, pero sí funciona. La interpretación que hacen los navegadores del CSS es muy misteriosa.

Código:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>titulo</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     
    <script type="text/javascript">
    //<![CDATA[
    onresize= function(){document.title = document.body.clientWidth}
    //]]>
    </script>

    <style type="text/css">
    img {margin-bottom:30px; max-width:90%; min-width:200px; }
    </style>

    </head>
    <body>
    <img src="http://img694.imageshack.us/img694/5623/constanceperez.jpg" ><br>
    <img src="http://imageshack.us/a/img705/8679/grafiti10.jpg" ><br>

    </body>
    </html>

El problema sigue siendo -bien acotado, mariogl84- el Internet Explorer.
O más bien, las versiones viejas, porque supongo que las últimas tendrán alguna compatibilidad.

Por seguir delirando, se me ocurrió ... "esto"

Código:

<!--[if IE]>
    <style type="text/css">
    img {
width: expression(document.body.clientWidth < 201? "200px": document.body.clientWidth > this.className.substring(1)*1? "auto" : "90%"); 
}
    </style>
<![endif]-->

que por supuesto iría en el <head> debajo de los otros estilos; y -lo más impresentable-

Código:

    <img src="http://img694.imageshack.us/img694/5623/constanceperez.jpg" class="w257" onclick="alert(this.className.substring(1)*1)"><br>
    <img src="http://imageshack.us/a/img705/8679/grafiti10.jpg" class="w640" onclick="alert(this.className.substring(1)*1)"><br>

en el <body>. Los onclick están para confirmar manualmente las "clases con ancho" (porque el valor es el ancho default de cada imagen), y la mala noticia es que no lo probé. Si no me falla la memoria, IE6 no reconocía el this en la hoja de estilos, pero me parece que IE8 ya sí. Si alguien lo quiere probar ...

[Nota: saludos a mi difunta madre (QEPD) no serán aceptados.]

[memoadian]

estoy medio de acuerdo con mariogl84

creo que deberías dejar las imágenes al tamaño que tienen y simplemente poner la regla de que no sobrepasen su contenedor

Código CSS:

img{
    max-width:90%;
    height:auto;
}
 

[pzin]

Iniciado por furoya

¿No tenías un personaje mejor para compararme?

El otro que tenía en mente era un personaje de Martín (Hache).
Pero al otro realmente le tengo cierto aprecio lírico.

Iniciado por furoya

Ninguna, pero sí funciona. La interpretación que hacen los navegadores del CSS es muy misteriosa.

No entiendo nada. Estoy en esas situaciones donde darle la vuelta a las cosas más y más sirve de menos y menos... :

Edito: Y sigo dándole vueltas al min-width... Ahora me pregunto que qué hará ahí. :nohayunavatarparamiactualformaneuroticadepensar:

[mariogl84]

Explico la propuesta:

Código:

max-width:90%;

Aquí todos estamos de acuerdo, esto es lo que hace que la imagen sea elástica y se escale junto con su contenedor.

Código:

min-width:350px;

Esta regla hace que la imagen sea elástica sólo hasta este ancho, es decir, que escale sólo hasta 350px. La he probado en IE7, 8 y 9 y funciona, con la salvedad de que hay algunos píxeles de diferencia entre el 7 y el 8 cuando el contenedor fuerza a la imagen hasta su mínimo. Aquí habría que darle alguna vueltecilla de tuerca más.

Y, por supuesto, el añadido de memoadian:

Código:

height:auto;

En mis pruebas no ha sido necesaria esta regla, pero seguro que por compatibilidad es mucho más seguro usarla y así se evitan deformaciones.

Este código funcionaría, si no me equivoco, para cualquier imagen que esté dentro de #content, sean cual sean sus dimensiones (por encima de 350px de ancho, claro), sin necesidad de usar clases distintas para cada imagen ni JS.

Otra historia es el IE6, que ni siquiera he mirado, pero que creo que podríamos dar ya por muerto, ¿no?

[jluisfg]

Por que no utilizas max-width: 100% nada mas?

Te ahorras problemas y las imagenes serán elasticas. Y puedes agregar margin: 0 auto para centrarlas si quieres.

Saludos!

[furoya]

Iniciado por mariogl84

En mis pruebas no ha sido necesaria esta regla [height:auto;], pero seguro que por compatibilidad es mucho más seguro usarla y así se evitan deformaciones.

La verdad es que no. Ese valor es default, y a menos que algún selector más arriba haya cambiado los valores de altura en las imágenes, da lo mismo si lo ponés, o no.

Iniciado por mariogl84

La he probado en IE7, 8 y 9 y funciona...

Perfecto, entonces no hace falta ningún engendro de compatibilidad.

Iniciado por Bonez

Y sigo dándole vueltas al min-width... Ahora me pregunto que qué hará ahí.

Bueno. Acá ya tenemos un problema. Resulta que para mi ejemplo (que de momento es el único que tenemos para probar) se me ocurrió darle un min-width: 200px.
La idea es frenar el "90%" al reducir la ventana usando una medida mínima, tal como dice mariogl84. Porque el problema es la medida máxima, tal como dice chichote; y ese límite inferior sería para asegurar el diseño. Nada más.

Y yo creí que andaba en todos. Pero Chrome detiene la redimensión de la ventana en 200 pixeles. Por eso aluciné que era el CSS min-width:200px, cuando en realidad era el navegador que no bajaba más que eso. (Qué zapallo.)
Así que en el browser de Google me parece que no anda, Justo ahora se me tildó y no lo puedo reinstalar, pero creo que la imagen se sigue achicando por debajo de la medida mínima declarada.

En Firefox el límite que me aparece es 270 ... casualmente el ancho de la imagen más chica que usé, por lo que a priori supuse que respetaba algún ancho default como mínimo. (Qué nabo.)
Pero si le doy medidas mas grandes las imágenes se paran ahí.

Opera se me frena a los 235 pixeles. Permite seguir achicando la ventana, pero el panel del documento tiene un límite. Y el [font=monospace]min-width[font] lo interpreta.

Los IE no los pruebo, porque ya lo hizo mariogl84 y sabemos que andan.

Si a alguien le interesan las recomendaciones del Consortium, acá hay una tabla con el comportamiento CSS 2.1.

http://www.w3.org/TR/CSS21/visudet.html#min-max-widths

[pzin]

Probando por aquí el código furoya, que llega a unos 100px —a ojo— el ancho del navegador, parece que en Chrome/Safari/Firefox funciona. No puedo probar con IE porque no uso mIErda elevada a lo que sea en mi ordenador.

Bueno, por lo menos me quité mi ofuscación relativo a este tema.

[memoadian]

Jaja, me encanta cuando el post tiene 14 respuestas y el que preguntó ni sus luces

[furoya]

Iniciado por Bonez

Probando por aquí el código furoya, que llega a unos 100px —a ojo— el ancho del navegador, parece que en Chrome/Safari/Firefox funciona. No puedo probar con IE porque no uso mIErda elevada a lo que sea en mi ordenador.

Al final lo probé en un IE8, y lo que le interesa a chichote, sí anda.

Iniciado por memoadian

Jaja, me encanta cuando el post tiene 14 respuestas y el que preguntó ni sus luces

Yo estaba pensando exactamente lo mismo.

(¿Eso es bueno o es malo? )

[chichote]

Wow muchachos, gracias, nunca dejo los post tirados como algunos hicieron ver, esta vez fue de fuerza mayor. Se agrade la colaboracion de cada uno.

Finalmente convenci a mi cliente de que agregara la opcion de agregar class a las imagenes en su cms, y cada opcion le cree una regla en el css y chao. Ademas que la pagina se veia horrible con diferentes tamaños de imagenes.

Saludos y nuevamente gracias.

Chichote.