너비, 높이에 맞게 CSS 배경 이미지가 비례하여 자동 크기 조정되어야 함

나는 가지고있다

body {
    background: url(images/background.svg);
}

원하는 효과는이 배경 이미지의 너비가 페이지의 너비와 같고 높이가 비율을 유지하도록 변경되는 것입니다. 예를 들어 원본 이미지의 크기가 100 * 200 (모든 단위)이고 본문의 너비가 600 픽셀 인 경우 배경 이미지의 높이는 1200px입니다. 창의 크기를 조정하면 높이가 자동으로 변경됩니다. 이것이 가능한가?

현재 Firefox는 높이를 맞추고 너비를 조정하는 것처럼 보입니다. 높이가 가장 긴 치수이고 자르기를 피하려고 노력하고 있기 때문일 수 있습니까? 내가 원하는 어떤 수평 반복 : 다음 스크롤, 수직으로 잘라 없습니다.

또한 Chrome은 이미지를 중앙에 배치하고 background-repeat:repeat명시 적으로 지정된 경우에도 반복하지 않습니다 . 어쨌든 기본값입니다.

이를위한 CSS3 속성이 있습니다 background-size( 호환성 검사 ). 하나의 길이 값을 설정할 수 있지만, 일반적으로 특별한 값으로 사용되는 contain및 cover. 특정한 경우에는 다음을 사용해야합니다 cover.

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

대한 Eggsplanation contain및cover

나쁜 말장난은 미안하지만, Biswarup Ganguly의 오늘 의 그림 을 시연에 사용할 것입니다. 이것이 화면이고 회색 영역이 보이는 화면 외부에 있다고 가정 해 봅시다. 시연을 위해 16x9 비율을 가정하겠습니다.

위에서 언급 한 오늘의 그림을 배경으로 사용하고 싶습니다. 그러나 어떤 이유로 이미지를 4x3으로 자릅니다. 우리는 설정할 수 있습니다 background-size몇 가지 고정 된 길이 속성을하지만, 우리는에 초점을 맞출 것이다 contain및 cover. 또한 너비 및 높이를 엉망으로하지 않았다고 가정합니다 body.

contain

contain

너비와 높이가 모두 배경 위치 영역 안에 들어갈 수 있도록 이미지의 고유 종횡비 (있는 경우)를 가장 큰 크기로 유지합니다.

그러면 배경 이미지가 항상 배경 위치 영역에 완전히 포함되지만 background-color이 경우 빈 공간이 채워질 수 있습니다 .

cover

cover

너비와 높이가 모두 배경 위치 영역을 완전히 덮을 수 있도록 이미지를 고유 한 종횡비 (있는 경우)를 가장 작은 크기로 유지합니다.

이것은 배경 이미지가 모든 것을 덮고 있는지 확인합니다. 표시되지 background-color않지만 화면 비율에 따라 이미지의 대부분이 잘릴 수 있습니다.

실제 코드를 사용한 데모

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

https://developer.mozilla.org/en-US/docs/CSS/background-size의 팁을 바탕으로 저에게 도움이되는 다음 레시피로 끝납니다.

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

정확히 무엇을 찾고 있는지 잘 모르겠지만 CSS-Tricks의 Chris Coyier가 작성한 훌륭한 블로그 게시물을 확인해야합니다.

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

각 기사에 대한 설명을 읽고 원하는 내용인지 확인하십시오.

첫 번째는 다음 질문에 대한 답변입니다.

배경 이미지의 크기를 조절할 수있는 방법이 있습니까? 마찬가지로 브라우저 창의 크기에 관계없이 웹 페이지의 배경을 이미지로 채 웁니다. 또한 브라우저 창이 바뀌면 크기를 더 크게 또는 작게 조정하십시오. 또한 비율이 유지되는지 확인하십시오 (이상하게 늘어나지 않음). 또한 스크롤 막대를 발생시키지 않고 필요한 경우 세로로 자릅니다. 또한 페이지에 인라인 태그로 제공됩니다.

두 번째 게시물의 목표는 "항상 전체 브라우저 창을 포함하는 웹 사이트의 배경 이미지"를 얻는 것입니다.

도움이 되었기를 바랍니다.

배경 이미지가 완벽하게 설정되지 않은 경우 CSS가 문제가되어 CSS 파일이 코드 아래로 변경됩니다.

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

%; 배경 크기 : 100 % 100 %; "

이 시도,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

이 한 줄을 추가하십시오.

    .your-class {
        height: 100vh;
    }

vh는 뷰포트 높이입니다. 장치의 브라우저 창에 맞게 자동으로 조정됩니다.

여기에서 더 확인하십시오 : div를 브라우저 창의 높이 100 %로 설정 하십시오.

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}

브라우저 크기를 조정할 때 이미지의 크기를 조정할 수없는 동일한 문제가 있습니다.

나쁜 코드 :

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

좋은 코드 :

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

여기서 핵심은이 요소의 추가입니다.-> background-size : contains;

나를 위해 일한 것은 다음과 같습니다.

background-size: auto 100%;

배경 크기를 설정해도 도움이되지 않으므로 다음 해결책이 효과적이었습니다.

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

기본적으로 이미지를 자르고 이미지를 맞추지 만 background-size: contain/cover여전히 이미지를 맞추지 못했습니다.