다음 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;또한이 존재 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를 채우는 것은 복잡하지 않으며 부모 요소의 스타일을 올바르게 지정해야 이미지에 들어갈 수있는 위치가 있습니다.
크리스