CSS Jak rozciągnąć, aby dopasować i zachować proporcje?

Question

Mam następujące CSS:

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

Odpowiada to HTML:

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

Skutkuje to tym bałaganie:

jeśli mogę użyć tle-CSS3 rozmiar: 175px 160px; Proporcje są bardzo pomieszane powodując bałagan tak:

Czy istnieje sposób, aby rozciągnąć obraz, aby dopasować div? Ale w pewnym sensie, w jakim proporcje są zachowane? Chcę automatycznego przycinania.

Answer 1

To powinno działać (w przeglądarkach obsługujących background-size):

background-size: 175px auto; 

Można też spróbować:

background-size: cover; 

Lub:

background-size: contain; 

There's a good explanation on MDC.

Answer 2

Czy to musi być obraz tła?

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


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

Answer 3

Można użyć właściwości background-size z wartością contain:

background-size: contain; 

Oto przykład roboczych: https://jsfiddle.net/gusrodriguez/auuk97hf/1/

W powyższym przykładzie, ciało ma rozciągniętej obraz w tle. Istnieją również dwa elementy div o dowolnym rozmiarze, a także inny obraz, który pasuje i zachowuje proporcje.