높이가 '자동'인 100 % 너비 배경 이미지

현재 회사의 모바일 랜딩 페이지를 작업하고 있습니다. 정말 기본적인 레이아웃이지만 헤더 아래에는 항상 너비가 100 % 인 제품 이미지가 있습니다 (디자인은 항상 가장자리에서 가장자리로 이동 함을 보여줍니다). 화면의 너비에 따라 이미지의 높이가 그에 따라 분명히 조정됩니다. 저는 원래 img (CSS 너비가 100 %)로이 작업을 수행했으며 훌륭하게 작동했지만 미디어 쿼리를 사용하여 다양한 해상도에 따라 다른 이미지를 제공하고 싶다는 것을 깨달았습니다. 예를 들어, 동일한 이미지의 큰 버전. CSS로 img src를 변경할 수 없다는 것을 알고 있으므로 HTML의 img 태그가 아닌 이미지에 CSS 배경을 사용해야한다고 생각했습니다.

배경 이미지가있는 div는 배경을 표시하기 위해 너비와 높이가 모두 필요하기 때문에 제대로 작동하지 않는 것 같습니다. 당연히 '폭 : 100 %'를 사용할 수 있지만 높이는 무엇을 사용합니까? 150px와 같은 임의의 고정 높이를 넣을 수 있으며 이미지의 상단 150px를 볼 수 있지만 고정 높이가 없기 때문에 해결책이 아닙니다. 나는 놀았고 높이가 있으면 (150px로 테스트) 'background-size : 100 %'를 사용하여 div에 이미지를 올바르게 맞출 수 있음을 발견했습니다. 이 프로젝트는 모바일 전용이므로 최신 CSS3를 사용할 수 있습니다.

아래에 대략적인 예를 추가했습니다. 인라인 스타일을 용서해주십시오. 그러나 저는 제 질문을 좀 더 명확하게하기 위해 기본적인 예를 들었습니다.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

컨테이너 div에 전체 페이지를 기준으로 백분율 높이를 지정해야합니까? 아니면 완전히 잘못보고 있습니까?

또한 CSS 배경이이를 수행하는 가장 좋은 방법이라고 생각하십니까? 장치 / 화면 너비에 따라 다른 img 태그를 제공하는 기술이있을 수 있습니다. 일반적인 아이디어는 랜딩 페이지 템플릿이 다른 제품 이미지와 함께 여러 번 사용될 것이므로 가능한 최선의 방법으로 개발해야합니다.

죄송합니다.이 작업은 다소 시간이 오래 걸리지 만이 프로젝트에서 다음 프로젝트로 앞뒤로 진행 중이므로이 작은 작업을 완료하고 싶습니다. 시간 내 주셔서 미리 감사드립니다. 문안 인사

사용하는 대신 직접 background-image사용할 img수 있으며 이미지를 뷰포트의 모든 너비에 퍼뜨릴 수 있습니다. 사용을 시도 max-width:100%;하고 컨테이너의 전체 너비를 증가시킬 수 있으므로 주 컨테이너 div에 패딩이나 여백을 적용하지 마십시오. 이 규칙을 사용하면 브라우저의 너비와 동일한 이미지 너비를 가질 수 있으며 가로 세로 비율에 따라 높이도 변경됩니다. 감사.

편집 : 창 크기가 다른 이미지 변경

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){			
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

이런 식으로 브라우저의 다른 크기에서 이미지를 변경합니다.

Tim S.는 현재 받아 들여지는 대답보다 "정확한"대답에 훨씬 더 가깝습니다. cover(이미지가 측면에서 확장 될 수 있도록 허용) 또는 contain(이미지가 확장되지 않도록 허용하는 ) 대신 CSS로 완성 된 100 % 너비, 가변 높이 배경 이미지를 원하면 CSS를 다음과 같이 설정하십시오.

body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}

이렇게하면 배경 이미지가 100 % 너비로 설정되고 높이가 오버플로 될 수 있습니다. 이제 자바 스크립트에 의존하는 대신 미디어 쿼리를 사용하여 해당 이미지를 교체 할 수 있습니다.

편집 : 방금 깨달았습니다 (3 개월 후) 이미지가 오버플로되는 것을 원하지 않습니다. 내가 아는 한 CSS에서는 불가능한 배경 이미지 (종횡비를 유지하기 위해)에 따라 컨테이너 요소의 크기를 조정하려는 것 같습니다.

곧 요소 에서 새로운 srcset 속성 을 사용할 수 있기를 바랍니다 img. img지금 요소 를 사용 하려면 현재 허용되는 대답이 가장 좋습니다.

그러나 순전히 CSS를 사용하여 일정한 종횡비로 반응 형 배경 이미지 요소를 만들 수 있습니다. 이렇게하려면 다음 height과 같이 를 0으로 설정 padding-bottom하고을 요소 자체 너비의 백분율로 설정합니다 .

.foo {
    height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 75%; /* for a 4:3 aspect ratio */
    background-image: url(foo.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

다른 종횡비를 사용하려면 원본 이미지의 높이를 자체 너비로 나누고 100을 곱하여 백분율 값을 얻습니다. 패딩 백분율은 세로 패딩이더라도 항상 너비를 기준으로 계산되기 때문에 작동합니다.

이 시도

html { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

단순화 된 버전

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}

CSS 속성을 사용하고 기본 설정에 따라 또는로 background-size설정할 수 있습니다 . Cover는 창을 완전히 덮고 contain은 한면이 창에 맞도록하여 전체 페이지를 덮지 않습니다 (화면의 종횡비가 이미지와 같지 않은 경우).covercontain

이것은 CSS3 속성입니다. 이전 브라우저에서는이 속성이 무시됩니다. 또는 javascript를 사용하여 창 크기에 따라 CSS 설정을 변경할 수 있지만 이는 바람직하지 않습니다.

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}

두 가지 색상의 배경 이미지를 사용하십시오.

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>

CSS를 추가합니다.

   html,body{
        height:100%;
        }
    .bg-img {
        background: url(image.jpg) no-repeat center top; 
        background-size: cover; 
        height:100%;     
    }

그리고 html은 다음과 같습니다.

<div class="bg-mg"></div>

CSS : 배경 이미지를 화면의 너비와 높이를 100 % 늘이십니까?

2017 년, 이제 괜찮은 지원을 제공 하는 object-fit 을 사용할 수 있습니다 . div와 동일한 방식으로 작동 하지만 요소 자체 및 이미지를 포함한 모든 요소에서 작동합니다.background-size

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}