배경 이미지를 div에 맞춤

배경 이미지를 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">

배경 이미지를 잘라내지 않고 보여줄 수 있는 방법이 있습니까?

현재 대부분의 브라우저에서 지원되는 속성을 사용하여 이를 수행할 수 있습니다.

div 내부에 맞도록 배경 영상의 배율을 조정하는 방법

background-size: contain;

전체 div를 덮도록 배경 영상의 배율을 조정하려면:

background-size: cover;

JSFidle 예제 또는 실행 가능한 스니펫:

#imagecontainer {
  background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
  width: 100px;
  height: 200px;
  border: 1px solid;
  background-size: contain;
}

<div id="imagecontainer"></div>

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-position-x: center;
background-position-y: center;

또한 다음을 사용합니다.

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

당신의 div 값을 모르지만, 당신이 그것들을 가지고 있다고 가정해 보겠습니다.

height: auto;
max-width: 600px;

다시 말하지만, 그것들은 단지 난수일 뿐입니다.div에 대해 고정된 너비로 배경 이미지를 만드는 것은 상당히 어려울 수 있으므로 최대 너비를 사용하는 것이 좋습니다.그리고 실제로 div를 배경 이미지로 채우는 것은 복잡하지 않습니다. 단지 부모 요소를 올바른 방식으로 스타일링하여 이미지가 들어갈 수 있는 위치를 갖도록 하십시오.

크리스

다음 중 하나를 시도합니다.

background-size: contain;
background-size: cover;
background-size: 100%;

.container{
    background-size: 100%;
}

그background-size속성은 배경 이미지의 크기를 지정합니다.

이 속성에는 키워드 구문("자동", "덮개" 및 "포함"), 1-값 구문(이미지 너비 설정("자동"이 됨), 2-값 구문(첫 번째 값: 이미지 너비, 두 번째 값: 높이) 등 다양한 구문을 사용할 수 있습니다.

• 백분율 - 배경 이미지의 너비와 높이를 부모 요소의 백분율로 설정합니다.
• cover - 이미지를 늘리거나 가장자리 중 하나를 약간 잘라내야 하는 경우에도 전체 컨테이너를 덮도록 배경 이미지 크기 조정
• 포함 - 배경 이미지의 크기를 조정하여 이미지를 완전히 볼 수 있도록 합니다.

자세한 내용: https://www.w3schools.com/cssref/css3_pr_background-size.asp

대안:

background-size: auto 100%;

배경 크기를 커버로 설정하고 모양을 좋게 하려면 배경 위치 중심을 다음과 같이 설정할 수도 있습니다.

background-size: cover;
background-position: center ;

언급URL : https://stackoverflow.com/questions/8200204/fit-background-image-to-div