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

Question 1

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).

Question 2

Puedes escribir así:

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

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

Question 3

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">

Question 4

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;
}

Question 5

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;
}

Question 6

Prueba esto

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

Question 7

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>

Expandir fragmento

Answer 1

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).

html css image image-resizing 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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

¡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

Answer 9

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

Answer 10

1

@Lollero first OP edita su pregunta después de mi respuesta y ¿puedes explicar qué está mal en mi respuesta? gracias

sandeep

Answer 11

2

Esto no conserva la relación de aspecto en IE

Cocowalla

Answer 12

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

Answer 13

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">

Answer 14

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;
}

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

1

Eso no es correcto. Su selector significa "un elemento img dentro de un elemento Image".

Mr Lister

Answer 19

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>

Expandir fragmento

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

Respuestas: