Foros del Web » Creando para Internet » CSS »

Imagenes Elastica con Max-width definido

Estas en el tema de Imagenes Elastica con Max-width definido en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/10/2012, 21:59
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 19 años, 3 meses
Puntos: 145
Imagenes Elastica con Max-width definido

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.
__________________
http://chicho.ninja yiaaaa
  #2 (permalink)  
Antiguo 04/10/2012, 22:54
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Imagenes Elastica con Max-width definido

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
  #3 (permalink)  
Antiguo 05/10/2012, 01:47
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Imagenes Elastica con Max-width definido

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.

Cita:
Iniciado por chichote Ver Mensaje
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.
__________________
(:
  #4 (permalink)  
Antiguo 05/10/2012, 08:52
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Respuesta: Imagenes Elastica con Max-width definido

¡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).
  #5 (permalink)  
Antiguo 05/10/2012, 11:28
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Imagenes Elastica con Max-width definido

Eres como la conciencia posteada del fiel narrador de La Naranja Mecánica.
__________________
(:
  #6 (permalink)  
Antiguo 05/10/2012, 13:36
Avatar de mariogl84  
Fecha de Ingreso: noviembre-2002
Ubicación: Barcelona
Mensajes: 433
Antigüedad: 21 años, 4 meses
Puntos: 20
Respuesta: Imagenes Elastica con Max-width definido

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?
__________________
Puedes visitar mi blog sobre HTML, CSS y Wordpress.
  #7 (permalink)  
Antiguo 05/10/2012, 14:42
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Imagenes Elastica con Max-width definido

Cita:
Iniciado por mariogl84 Ver Mensaje
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.
__________________
(:
  #8 (permalink)  
Antiguo 05/10/2012, 19:35
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Respuesta: Imagenes Elastica con Max-width definido

Cita:
Iniciado por Bonez Ver Mensaje
Eres como la conciencia posteada del fiel narrador de La Naranja Mecánica.
¿No tenías un personaje mejor para compararme?



Cita:
Iniciado por Bonez Ver Mensaje
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.]
  #9 (permalink)  
Antiguo 05/10/2012, 21:00
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 9 meses
Puntos: 641
Respuesta: Imagenes Elastica con Max-width definido

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:
Ver original
  1. img{
  2.     max-width:90%;
  3.     height:auto;
  4. }
  #10 (permalink)  
Antiguo 05/10/2012, 22:14
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Imagenes Elastica con Max-width definido

Cita:
Iniciado por furoya Ver Mensaje
¿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.

Cita:
Iniciado por furoya Ver Mensaje
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:
__________________
(:

Última edición por pzin; 05/10/2012 a las 22:18 Razón: ¿Razón por la que preguntar?
  #11 (permalink)  
Antiguo 06/10/2012, 01:50
Avatar de mariogl84  
Fecha de Ingreso: noviembre-2002
Ubicación: Barcelona
Mensajes: 433
Antigüedad: 21 años, 4 meses
Puntos: 20
Respuesta: Imagenes Elastica con Max-width definido

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?
__________________
Puedes visitar mi blog sobre HTML, CSS y Wordpress.
  #12 (permalink)  
Antiguo 06/10/2012, 14:49
 
Fecha de Ingreso: abril-2011
Ubicación: Distrito Federal
Mensajes: 83
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Imagenes Elastica con Max-width definido

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!
  #13 (permalink)  
Antiguo 07/10/2012, 07:32
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Respuesta: Imagenes Elastica con Max-width definido

Cita:
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.



Cita:
Iniciado por mariogl84
La he probado en IE7, 8 y 9 y funciona...
Perfecto, entonces no hace falta ningún engendro de compatibilidad.



Cita:
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
  #14 (permalink)  
Antiguo 07/10/2012, 09:52
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Imagenes Elastica con Max-width definido

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.
__________________
(:
  #15 (permalink)  
Antiguo 07/10/2012, 12:44
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 9 meses
Puntos: 641
Respuesta: Imagenes Elastica con Max-width definido

Jaja, me encanta cuando el post tiene 14 respuestas y el que preguntó ni sus luces
  #16 (permalink)  
Antiguo 07/10/2012, 14:05
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Respuesta: Imagenes Elastica con Max-width definido

Cita:
Iniciado por Bonez Ver Mensaje
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.


Cita:
Iniciado por memoadian Ver Mensaje
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? )
  #17 (permalink)  
Antiguo 10/10/2012, 10:34
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 19 años, 3 meses
Puntos: 145
Respuesta: Imagenes Elastica con Max-width definido

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.
__________________
http://chicho.ninja yiaaaa

Etiquetas: elastica, imagenes, max-width, tamaño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:53.