Redimensonar una imagen al tamaño de un DIV o celda

[mensajeescrito]

Hola buenas, veran, me decido ha hacerles una pregunta despues de intentarlo ya todo lo que he podido.

¿ Existe alguna manera que teniendo un contenedor en forma de div o table que conteniendo una imagen, (siendo el tamaño del div o celda mas pequeño que la imagen), el div o celda no se agrande hasta el tamaño de la imagen ?


de alguna manera forzaria a que la imagen se redimensionara haciendose tan pequeña como el tamaño del div o tamaño de celda fuese.

( la imagen se redimensionaria de manera proporcional, muy importante).


Hay alguna manera de hacer esto , gracias de antemano

[Rafael]

Sí. Prueba con

Código CSS:

div.NombreQueLeHayasPuesto img {width: 100%}
 

[mensajeescrito]

Si, pero eso que dices de poner solo soluciona el que una foto se enmarque al ancho de la pantalla.


Pero si la foto es alargada , muy alargada, como una foto grande de la torre Eiffel, entonces es cuando la celda de la tabla o div se deforma por que solo le habriamos dado el limite en el width y no en el height.

pero claro no se puede dar valores exactos en el alto y ancho por que sino algunas fotos se deformarian.

por eso digo que si existe alguna forma de que no exceda los margenes del div o celda de la table ni por el alto ni por el ancho que le fijemos pero sin que deforme la foto.

saludos.

[pzin]

Puedes usar max-width y max-height. Funciona como se espera, no sobrepasará ninguna de las medidas que le hayas indicado.

Código CSS:

.algo {
  width: 100%;
  max-width: 200px;
  max-height: 100px;
}
 

Así por ejemplo nunca medirá más de 200*100. También puedes usar sólo un valor. Depende de cómo necesites ajustarlo.

[Rafael]

No es para el ancho de la pantalla, es para el ancho del contenedor. Tu definirás el ancho del contenedor por separado.

No entiendo el concepto "se deforma". Si quieres que no le pase nada al contenedor, entonces al contenedor le pones medidas específicas y un overflow: hidden por ejemplo.

No entiendo el caso específico que buscas. Desarrolla mejor un ejemplo.


Edito. Choqué con pzin, pero se complementa

[mensajeescrito]

Gracias me ha servido perfetamente lo de:

Código CSS:

max-width: 200px;
  max-height: 100px;
 

Pero me surge otra duda:

si existe codigo css capaz de de centrar un div en el centro de una pantalla:

Código CSS:

margin-left: auto;
margin-right: auto;
 

porque no funciona algo como:

Código CSS:

margin-top: auto;
margin-bottom: auto;
 

se que hay una forma de centrar verticalmente sabiendo previamente el alto del div.

Pero si el alto del div es variable segun el alto de la foto que contenga. como se puede centrar algo asi?¿?¿.


:-o