CSS 배경 이미지를 너비에 맞게 조정하고 높이를 비례하여 자동으로 조정해야 함

CSS 배경 이미지를 너비에 맞게 조정하고 높이를 비례하여 자동으로 조정해야 함

있습니다

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

원하는 효과는 이 배경 이미지가 페이지의 너비와 동일한 너비를 가지며, 비율을 유지하기 위해 높이가 변경된다는 것입니다. 예를 들어 원래 이미지가 100*200(단위)이고 본체가 600px 너비인 경우 배경 이미지는 1200px 높이가 되어야 합니다.윈도우 크기가 조정되면 높이가 자동으로 변경됩니다.가능한가요?

현재 파이어폭스는 높이를 맞춘 다음 폭을 조정하는 것처럼 보입니다.키가 가장 긴 치수인데다 자르지 않으려고 해서 그런가요?세로로 자른 다음 스크롤합니다. 가로 반복 안 함.

또한 Chrome은 이미지를 중앙에 배치하고 있습니다. 심지어 다음과 같은 경우에도 반복되지 않습니다.background-repeat:repeat는 명시적으로 제공되며, 이는 어쨌든 기본값입니다.

이를 위한 CSS3 속성, 즉 (호환성 검사)가 있습니다.길이 값을 설정할 수 있지만 일반적으로 특수 값과 함께 사용됩니다.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 */
}

에 대한 알 계획contain그리고.cover

말장난이 심해서 미안하지만, 비스와럽 강굴리의 그날 사진을 시연에 사용할 것입니다.이것이 화면이고 회색 영역은 화면 밖에 있다고 가정해 보겠습니다.시연을 위해 16x9 비율을 가정하겠습니다.

우리는 앞서 언급한 그날의 사진을 배경으로 사용하고 싶습니다.하지만 어떤 이유에서인지 이미지를 4x3으로 잘라냈습니다.우리가 설정할 수 있는 것은background-size일정한 길이의 재산이지만, 우리는 집중할 것입니다.contain그리고.cover. 또한 우리는 폭 및/또는 높이를 망가지지 않았다고 가정합니다.body.

contain

contain

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

이렇게 하면 배경 이미지가 항상 배경 위치 지정 영역에 완전히 포함되지만 빈 공간이 있을 수 있습니다.background-color이 경우:

cover

cover

이미지의 너비와 높이가 모두 배경 위치 지정 영역을 완전히 덮을 수 있도록 고유 가로 세로 비율(있는 경우)을 유지하면서 가장 작은 크기로 이미지의 크기를 조정합니다.

이렇게 하면 배경 이미지가 모든 것을 덮게 됩니다.눈에 보이지 않을 것입니다.background-color, 그러나 화면 비율에 따라 이미지의 상당 부분이 잘릴 수 있습니다.

실제코드로시연

div > div {
  background-image: url(https://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;
}

배경 이미지가 Set Perfect가 아니고 그의 css가 문제를 만들어서 그의 css 파일이 아래 코드로 바뀝니다.

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

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

정확히 무엇을 찾으시는지는 모르겠지만 CSS-Tricks의 Chris Coyier가 작성한 훌륭한 블로그 게시물을 확인해보시기 바랍니다.

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

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

각 기사에 대한 설명을 읽고 원하는 기사인지 확인합니다.

첫 번째 질문은 다음과 같습니다.

배경 이미지의 크기를 조정할 수 있는 방법이 있습니까?브라우저 창의 크기에 상관없이 웹 페이지의 배경을 이미지로 채웁니다.또한 브라우저 창이 변경됨에 따라 크기를 더 크게 또는 더 작게 조정합니다.또한 비율을 유지해야 합니다(이상하게 늘어나지 않음).또한 스크롤 바가 발생하지 않고 필요할 경우 세로로 잘라냅니다.또한, 인라인 태그로 페이지에 들어옵니다.

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

도움이 되길 바랍니다.

이 한 줄만 더하면 됩니다.

    .your-class {
        height: 100vh;
    }

v 그의 뷰포트 높이.장치의 브라우저 창에 맞게 자동으로 크기가 조정됩니다.

여기서 더보기: 브라우저 창 높이 100% div 만들기

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

이거 먹어봐요.

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

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

불량 코드:

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: contain;

제게 도움이 된 것은 다음과 같습니다.

background-size: auto 100%;

  width: 100%;
  height: 100vh;
  background: url("../img/hero-bg.jpg") top center;
  background-size: cover;
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;

정하면min-height, 예를 들어 다음과 같습니다.

min-height: 100vh;

아래 코드를 사용하여 배경에 쉽게 맞출 수 있습니다.

body {
  background: url(images/background.svg);
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
}

배경 크기를 설정하는 것은 도움이 되지 않습니다. 다음과 같은 솔루션이 효과가 있었습니다.

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

기본적으로 이미지를 잘라내서 몸에 맞게 만들고,background-size: contain/cover아직도 몸에 안 맞았거든요

언급URL : https://stackoverflow.com/questions/9262861/css-background-image-to-fit-width-height-should-auto-scale-in-proportion