Підійдіть фонове зображення до діва

Я маю фонове зображення в наступному розділі, але зображення відрізається:

 <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">

Чи є спосіб показати фонове зображення, не відрізаючи його?

Цього можна досягти за допомогою background-sizeвластивості, яку зараз підтримує більшість браузерів .

Щоб масштабувати фонове зображення, щоб вмістити його в div:

background-size: contain;

Щоб масштабувати фонове зображення, щоб охопити весь div:

background-size: cover;

Приклад JSFiddle

Існує також фільтр для підтримки IE 5.5+ , а також префікси постачальників для деяких старих браузерів .

Якщо вам потрібно, щоб зображення мало однакові розміри, я думаю, що це найелегантніше рішення:

background-size: 100% 100%;

Якщо ні, то відповідь від @grc є найбільш прийнятною.

Джерело: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Ви можете використовувати ці атрибути:

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

і ви код тоді такий:

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

Ви також використовуєте це:

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

Я не знаю ваших ді-цінностей, але припустимо, що ви їх отримали.

height: auto;
max-width: 600px;

Знову ж таки, це просто випадкові числа. Зробити фонове зображення (якщо ви хочете) це може бути досить важко з фіксованою шириною для div, тому краще використовувати max-width. А насправді не складно заповнити div з фоновим зображенням, просто переконайтесь, що ви правильно стилізуєте батьківський елемент, щоб у зображенні було місце, в яке він може потрапити.

Кріс