Cómo establecer el ancho máximo de una imagen en CSS

84

En mi sitio web me gustaría mostrar las imágenes cargadas por el usuario en una nueva ventana con un tamaño específico ( width: 600px). El problema es que las imágenes pueden ser grandes. Entonces, si son más grandes que estos 600px, me gustaría cambiar su tamaño, conservando la relación de aspecto.

Probé la max-widthpropiedad CSS, pero no funciona: el tamaño de la imagen no cambia.

¿Hay alguna forma de solucionar este problema?

HTML :

<div id="ImageContainerr">
    <img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>

CSS :

img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }

También intenté configurar el max-width: 600pxpara una imagen, pero no funciona. La imagen se transmite desde un servlet (se almacena fuera de la carpeta webapps de Tomcat).

usuario1315305
fuente
1
si desea que se reduzca automáticamente, simplemente configure max-width, no configure max-heighty debería funcionar. Si no es así, publique su código para que otros puedan ayudarlo a detectar el problema.
Ray Cheng
2
Acabo de probar tu ejemplo y funciona aquí. ¿Está seguro de que no tiene el mismo error tipográfico en su html real ("ImageContainerr") que aquí en este ejemplo?
Mr Lister
Maldita sea, tienes razón. Reinicié mi Tomcat y el navegador, lo intenté de nuevo y realmente funciona bien. Gracias de todos modos :) El error tipográfico no fue el caso - cambié la identificación y el nombre de la clase aquí para que sea más fácil de entender.
user1315305
3
A partir de esto, supongo que no usa Firebug u otras herramientas de desarrollo. Le sugiero que obtenga Firebug y aprenda a usarlo. (Al inspeccionar estos dos elementos, habría visto que el ancho no se agregó al contenedor.)
Joonas
2
Advertencia: esta pregunta es mucho menos aplicable de lo que parece inicialmente. Parece que muchos votos positivos podrían deberse a que esos votantes también se perdieron que elidaquí no coincidía con el CSS. Como está escrito (20151201), esta pregunta se reduce a "Los selectores CSS que no coinciden con ningún objeto DOM no influyen en la apariencia". ; ^) (No puedo imaginar si sería mejor editar la pregunta para preguntar qué implica su título que hace o no ...)
ruffin

Respuestas:

133

Puedes escribir así:

img{
    width:100%;
    max-width:600px;
}

Compruebe esto http://jsfiddle.net/ErNeT/

sandeep
fuente
¡Muchas gracias! ¡Eso funciona perfectamente! Editar: Bueno, no exactamente, también cambia el tamaño de las imágenes que son más pequeñas que 600px, y eso es algo que no quiero.
user1315305
3
Yo voté en contra. Lo que quiere el OP no es lo que usted ofrece. También debería haberse dado cuenta de que podría haber un problema en el código de OP porque normalmente lo que intentó, debería funcionar ... Quien haya votado, dame una razón, gracias.
Joonas
1
@Lollero first OP edita su pregunta después de mi respuesta y ¿puedes explicar qué está mal en mi respuesta? gracias
sandeep
2
Esto no conserva la relación de aspecto en IE
Cocowalla
1
¿Cuál es el propósito del "ancho: 100%"? ¿El violín vinculado parece funcionar bien sin él? (Probado en Firefox y Safari en Mac OX)
Jon Schneider
12

Veo que esto no ha sido respondido como definitivo.

Veo que tiene un ancho máximo como 100% y un ancho como 600. Voltee esos.

Una forma sencilla también es:

     <img src="image.png" style="max-width:600px;width:100%">

Yo uso esto a menudo, y luego puedes controlar imágenes individuales también, y no tenerlo en todas las etiquetas img. También podría CSS como a continuación.

 .image600{
     width:100%;
     max-width:600px;
 }

     <img src="image.png" class="image600">
Merle_the_Pearl
fuente
5

El problema es que la etiqueta img es un elemento en línea y no puede restringir el ancho del elemento en línea.

Entonces, para restringir el ancho de la etiqueta img, primero debe convertirlo en un elemento de bloque en línea

img.Image{
    display: inline-block;
}
Kamlesh Uikey
fuente
3

Dado el ancho de su contenedor 600px.

Si desea que solo quepan imágenes más grandes que esas, agregue: CSS:

#ImageContainer img {
    max-width: 600px;
}

Si desea que TODAS las imágenes ocupen el espacio disponible (600 px):

#ImageContainer img {
    width: 600px;
}
Leo Armentano
fuente
Además, los comentarios en el OP indican que está utilizando una identificación incorrecta en el archivo CSS: div # ImageContainer no es lo mismo que <div id = "ImageContainerr">
Leo Armentano
1

Prueba esto

 div#ImageContainer { width: 600px; }
 #ImageContainer img{ max-width: 600px}
Krish
fuente
1
Eso no es correcto. Su selector significa "un elemento img dentro de un elemento Image".
Mr Lister
0

Tu CSS es casi correcto. Solo falta display: block;en la imagen css. También un error tipográfico en su identificación. Debería ser<div id="ImageContainer">

img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }
<div id="ImageContainer">
    <img src="http://placehold.it/1000x600" class="Image">
</div>

Ritmo Ruparelia
fuente