css - pantalla - Haz una imagen que se ajuste a sus dimensiones padre.

como hacer que una imagen se ajuste ala pantalla en html

Question

Tengo algunas fotos que son de gran tamaño, y me gustaría establecerlas en el tamaño de dimensión del Padre. si alguna vez la dimensión principal es 1200x800, me gustaría establecer las dimensiones de la foto en 1200x800, pero también me gustaría ver la imagen completa . Si mi dimensión principal es 500x300, me gustaría que la imagen fuera 500x300 y así sucesivamente.

¿Es esto posible? Quiero reducir la imagen o expandirla de acuerdo con la dimensión de su padre.

¡Gracias!

Answer 1

Podría ser ingenuo, pero ¿no es esto tan simple como esto?

img {
width:100%;
height:100%;
}

Answer 2

Prueba esto en la etiqueta de imagen

<img src="url.jpg" width="100%" height="100%" />

O establezca el fondo del elemento como imagen y haga lo mismo.

Answer 3

Usa este bit de css para escalar tu imagen:

img {
max-width: 100%;
max-height: 100%;
}

Answer 4

intente usar la propiedad de ancho máximo, esto podría causar un error en versiones anteriores, aunque IE

#custom img {
max-width: 100%;
max-height: 100%;
}

Answer 5

La propiedad css que desea es max-width :

Css

img {
max-width:100%;
}

Puede agregar un contenedor alrededor de su imagen y configurar el overflow:hidden para evitar que las imágenes se vuelvan más grandes que el ancho / alto definido.