Stretch immagine per adattarla al 100% della Div altezza e la larghezza

Question

Ho un div con il seguente CSS

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

e il mio HTML assomiglia a questo

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

vorrei la mia immagine web per sempre la stessa dimensione (in una proporzione 1: 1) indipendentemente dalla risoluzione dell'immagine reale. Se i miei file di immagine reali sono quadrati (con rapporto 1: 1), questo non è un problema. Ma se i file di immagine reali non sono quadrati, l'immagine web visualizzata si estende al 100% sia dell'altezza e della larghezza del div (in questo caso 200px).

Come ottengo immagini di dimensioni diverse per adattarle al mio DIV?

Answer 1

Stai mescolando le notazioni. Dovrebbe essere:

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

(nota, non px). Oppure:

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

(utilizzando lo stile attributo) L'attributo style potrebbe essere sostituito con il seguente CSS:

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

o

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

Answer 2

Invece di impostare larghezze e altezze assolute , è possibile utilizzare le percentuali:

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

Answer 3

Oppure si può mettere nel CSS,

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