CSS làm cách nào để bạn kéo dài để vừa vặn và duy trì tỷ lệ co?

Question

Tôi có css sau:

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

Đó tương ứng với HTML này:

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

Nó là kết quả trong đống lộn xộn này:

nếu tôi sử dụng background- css3 kích thước: 175px 160px; Tỷ lệ khía cạnh thực sự là sai lầm dẫn đến một mớ hỗn độn như thế này:

Có cách nào để kéo dài một hình ảnh để phù hợp với một div? Nhưng theo cách mà tỷ lệ khung hình được duy trì? Tôi muốn một cây trồng tự động.

Answer 1

này nên làm việc (trong các trình duyệt có hỗ trợ background-size):

background-size: 175px auto; 

Bạn cũng có thể thử:

background-size: cover; 

Hoặc:

background-size: contain; 

There's a good explanation on MDC.

Answer 2

Có cần phải là hình nền không?

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


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

Answer 3

Bạn có thể sử dụng background-size tài sản với giá trị contain:

background-size: contain; 

Dưới đây là một ví dụ làm việc: https://jsfiddle.net/gusrodriguez/auuk97hf/1/

Trong ví dụ trên, cơ thể có một hình ảnh kéo dài trong nền. Ngoài ra còn có hai div với kích thước tùy ý, và với một hình ảnh phù hợp và giữ tỷ lệ khung hình.