hình nền Fit để div

Question

Tôi có một hình ảnh nền trong div sau, nhưng hình ảnh bị cắt đứt:

<div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center"> 

Có cách nào để hiển thị hình nền mà không cần cắt nó đi?

Answer 1

Bạn có thể đạt được điều này với thuộc tính background-size, hiện là supported by most browsers.

Để mở rộng các hình nền để phù hợp với bên trong div:

background-size: contain; 

Để mở rộng các hình nền để trang trải toàn bộ div:

background-size: cover; 

JSFiddle example

Ngoài ra còn tồn tại một filter for IE 5.5+ support , cũng như vendor prefixes for some older browsers.

Answer 2

Bạn có thể thay đổi chiều rộng và chiều cao div của bạn hoặc đặt kích thước nền.

Answer 3

bạn cũng sử dụng này:

background-size:contain; 
height: 0; 
width: 100%; 
padding-top: 66,64%; 

Tôi không biết div-giá trị của bạn, nhưng chúng ta hãy giả sử bạn đã có những.

height: auto; 
max-width: 600px; 

Một lần nữa, đó chỉ là số ngẫu nhiên. Nó có thể khá khó khăn để làm cho background-image (nếu bạn muốn) với một chiều rộng cố định cho div, vì vậy tốt hơn sử dụng max-width. Và thực sự không phức tạp khi điền vào một div với hình nền, chỉ cần đảm bảo bạn tạo kiểu cho phần tử cha đúng cách, vì vậy hình ảnh có một vị trí mà nó có thể đi vào.

Chris

Answer 4

Nếu những gì bạn cần là hình ảnh có kích thước tương tự của div, tôi nghĩ rằng đây là giải pháp thanh lịch nhất:

background-size: 100% 100%; 

Nếu không, câu trả lời bằng cách @grc là được chiếm đoạt nhiều nhất.

Nguồn: http://www.w3schools.com/cssref/css3_pr_background-size.asp