배경 이미지를 div에 맞추기

다음 div에 배경 이미지가 있지만 이미지가 잘립니다.

 <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 이상 지원 필터 뿐만 아니라 일부 이전 브라우저 공급 업체 접두사를 .

div의 치수가 동일한 이미지가 필요한 경우 이것이 가장 우아한 해결책이라고 생각합니다.

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의 고정 너비로 ​​배경 이미지 (원하는 경우)를 만들기가 어려울 수 있으므로 최대 너비를 사용하는 것이 좋습니다. 실제로 배경 이미지로 div를 채우는 것은 복잡하지 않으며 부모 요소의 스타일을 올바르게 지정해야 이미지에 들어갈 수있는 위치가 있습니다.

크리스