Phù hợp với hình nền cho div

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

 <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 ảnh nền mà không cắt nó?

Bạn có thể đạt được điều này với thuộc background-sizetính, hiện được hầu hết các trình duyệt hỗ trợ .

Để chia tỷ lệ hình nền cho vừa với div:

background-size: contain;

Để chia tỷ lệ hình nền để bao phủ toàn bộ div:

background-size: cover;

Ví dụ về JSFiddle

Ngoài ra còn có bộ lọc hỗ trợ IE 5.5+ , cũng như tiền tố của nhà cung cấp cho một số trình duyệt cũ hơn .

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

background-size: 100% 100%;

Nếu không, câu trả lời của @grc là câu trả lời thích hợp nhất.

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

Bạn có thể sử dụng thuộc tính này:

background-size: contain;
background-repeat: no-repeat;

và mã của bạn là như thế này:

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">

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

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

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

height: auto;
max-width: 600px;

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

Chris