html - tamaño - Cómo establecer el ancho máximo de una imagen en CSS

tamaño de una imagen de fondo css

Question

En mi sitio web me gustaría mostrar 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, preservando la relación de aspecto.

Intenté la propiedad CSS de max-width , pero no funciona: el tamaño de la imagen no cambia.

¿Hay alguna manera de resolver 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é establecer el max-width: 600px para una imagen, pero no funciona. La imagen se transmite desde un servlet (se almacena fuera de la carpeta webapps de Tomcat).

Answer 1

Dado el ancho de su contenedor 600px.

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

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

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

#ImageContainer img {
    width: 600px;
}

Answer 2

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

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

img.Image{
    display: inline-block;
}

Answer 3

Prueba esto

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

Answer 4

Puedes escribir así:

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

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

Answer 5

Tu css es casi correcto. Solo te falta display: block; en la imagen css. También un error tipográfico en tu identificación. Debe 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>