html - que - expandir imagen css

Estire la imagen para que se ajuste al 100% de la altura y anchura de div

Question

Tengo un div con el siguiente CSS

#mydiv{
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

y mi HTML se ve asi

<div id = "mydiv">
    <img src = "folder/file.jpg" width = "200px" height = "200px">
</div>

Me gustaría que mi imagen web sea siempre del mismo tamaño (en una relación de aspecto 1: 1) sin importar cuál sea la resolución de la imagen real. Si mis archivos de imagen reales son cuadrados (con una relación de 1: 1), esto no es un problema. Pero si los archivos de imagen reales no son cuadrados, entonces la imagen web mostrada se extiende al 100% tanto de la altura como del ancho del div (en este caso 200px).

¿Cómo puedo obtener diferentes tamaños de imagen para adaptarlos a mi DIV?

Answer 1

En lugar de establecer anchos y alturas absolutos, puede usar porcentajes:

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

Answer 2

Estás mezclando notaciones. Debería ser:

<img src="folder/file.jpg" width="200" height="200">

(nota, no px ). O:

<img src="folder/file.jpg" style="width: 200px; height: 200px;">

(usando el atributo de estilo ) El atributo de estilo podría reemplazarse con el siguiente CSS:

#mydiv img {
    width: 200px;
    height: 200px;
}

o

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

Answer 3

O puedes poner en el CSS,

<style>
div#img {
  background-image: url(“file.png");
  color:yellow (this part doesn''t matter;
  height:100%;
  width:100%;
}
</style>