CSS come si allunga per adattarsi e mantenere le proporzioni?

Question

Ho il seguente CSS:

.mod.left { 
background-image: url("http://www.myimage.jpg"); 
display: block; 
height: 160px; 
overflow: hidden; 
width: 175px; 
} 

che corrisponde a questo HTML:

<div class="mod left"></div> 

Essa si traduce in questo pasticcio:

se uso il background-css3 dimensione: 175 px 160 px; Il rapporto di aspetto è davvero incasinato risultante in un pasticcio come questo:

Esiste un modo per allungare l'immagine per adattarsi a un div? Ma in un modo in cui viene mantenuto il rapporto d'aspetto? Voglio un ritaglio automatico.

Answer 1

Questo dovrebbe funzionare (nei browser che supportano background-size):

background-size: 175px auto; 

Si potrebbe anche provare:

background-size: cover; 

Oppure:

background-size: contain; 

There's a good explanation on MDC.

Answer 2

Ha bisogno di essere un'immagine di sfondo?

img{ 
width:300px; 
height:auto; 
} 


<img src="your-photo.png"> 

Answer 3

È possibile utilizzare la proprietà background-size con il valore contain:

background-size: contain; 

Ecco un esempio di lavoro: https://jsfiddle.net/gusrodriguez/auuk97hf/1/

Nell'esempio di cui sopra, il corpo ha un'immagine allungata in background. Inoltre ci sono due div con dimensione arbitraria, e con un'altra immagine che si adatta e mantiene le proporzioni.