CSS 배경 이미지에 해당하는 srcset이 있습니까?

Question 1

img와 srcset반응 이미지를하는 좋은 방법 같은 속성 보인다. CSS background-image속성 에서 작동하는 동등한 구문이 있습니까?

HTML

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

CSS

.mycontainer {
    background: url(?something goes here?);
}

Question 2

image-set동등한 CSS 기능입니다. 사양에 상응하는 srcset 기능 (크기에 따라 리소스 정의)을 추가해야합니다.

현재는 -webkit-접두사가 있는 Safari, Chrome 및 Opera에서만 구현되며 x설명 자만 지원합니다 .

Question 3

확실히 :

background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );

같은 방식으로 작동합니다. 브라우저는 이미지를 검사하여 가장 적합한 이미지를 확인하고 해당 이미지를 사용합니다.

Question 4

솔직히 더 강력한 또 다른 접근 방식은 배경 이미지의 특성과 옵션을 srcset 속성이있는 이미지에 적용하는 것입니다.

이렇게하려면 이미지를 너비로 설정합니다. 100 %; 높이 : 100 %; 및 개체 맞춤 : 덮거나 포함합니다.

다음은 그 예입니다.

.pseudo-background-img-container {
  position: relative;
  width:400px;
  height: 200px;
}
.pseudo-background-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="pseudo-background-img-container">

<img class="pseudo-background-img" src="https://cdn3.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep.jpg" srcset="https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep.jpg 640w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-280x175.jpg 280w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-432x270.jpg 432w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-216x135.jpg 216w" sizes="(max-width: 640px) 100vw, 640px">

</div>

스 니펫 확장

이것은 모든 사람에게 최선의 방법은 아니지만 자바 스크립트 해결 방법 없이도 원하는 결과를 얻을 수 있다고 생각합니다.

Question 5

polyfill의 경우 올바른 이미지 크기를 다운로드하기위한 메커니즘으로 srcset와 함께 img를 사용한 다음 JS를 사용하여이를 숨기고 상위 요소의 배경 이미지를 설정할 수 있습니다.

여기 바이올린이 있습니다 : http://jsbin.com/garetikubu/edit?html,output

onloadJS를 차단 스크립트로 사용 하고 넣는 <head>것이 중요합니다. 나중에 스크립트를 넣으면 (예 <body>:) 브라우저에서 img.currentSrc가 아직 설정되지 않은 경쟁 조건을 얻을 수 있습니다. 로드 될 때까지 기다리는 것이 가장 좋습니다.

이 예제에서는 다운로드중인 원본 이미지를 볼 수 있습니다. CSS로 쉽게 숨길 수 있습니다.

Question 6

목적에 맞게 미디어 쿼리를 사용할 수 있습니다. 다음과 같이 쉽습니다.

.mycontainer {    
    background-image:url("img/image-big.jpg"); // big image   
}

@media(max-width: 768px){
   .mycontainer {
        background-image:url("img/image-sm.jpg"); // small image  
    }
}

그리고 미디어 쿼리를 지원하는 모든 브라우저에서 작동한다고 생각합니다.)

Question 7

<picture>요소를 사용한 유사한 솔루션 : 여기 튜토리얼

튜토리얼 사례 :

더 작은 화면 크기에 동일한 이미지를 사용하면 이미지의 주 피사체가 너무 작아 질 수 있습니다. 다른 화면 크기에 다른 이미지 (주 피사체에 더 초점을 맞춘)를 표시하고 싶지만 여전히 장치 픽셀 비율에 따라 동일한 이미지의 개별 자산을 표시하고 싶습니다. 뷰포트를 기반으로 한 이미지.

예제 코드 :

<picture>

<source media="(max-width: 20em)" srcset="images/small/space-needle.jpg 1x,
images/small/space-needle-2x.jpg 2x, images/small/space-needle-hd.jpg 3x">

<source media="(max-width: 40em)" srcset="images/medium/space-needle.jpg 1x,
images/medium/space-needle-2x.jpg 2x, images/medium/space-needle-hd.jpg 3x">

<img src="space-needle.jpg" alt="Space Needle">

</picture>

Question 8

Foundation 프레임 워크 ( https://foundation.zurb.com/ )를 사용하는 경우 다음을 위해 Interchange 플러그인을 사용할 수 있습니다.

<div data-interchange="[assets/img/interchange/small.jpg, small], 
                       [assets/img/interchange/medium.jpg, medium], 
                       [assets/img/interchange/large.jpg, large]">
</div>

https://foundation.zurb.com/sites/docs/interchange.html#use-with-background-images

Question 9

를 기반으로 @Weston 의 대답은, 내가 더 일반적인 jQuery를 솔루션을 구축했습니다 수행 할 수 있습니다 기본적으로 그냥 복사 및 JS와 HTML 부분에 CSS와 초점을 붙여 넣기)

TL; DR-바이올린 : https://jsfiddle.net/dpaa7oz6/

CSS

...로드하는 동안 이미지가 거의 보이지 않도록

.srcSet{
  position: fixed;
  z-index: 0;
  z-index: -1;
  z-index: -100;
  /* you could probably also add visibility: hidden; */
}

JS / jQuery

이 스크립트는 srcSet클래스 및 바인딩 load이벤트가 있는 모든 이미지를 통과합니다currentSrc (또는 src지원되지 않는 경우)background-image 하여 bgFromSrcSet클래스 가있는 가장 가까운 부모에 CSS로 배치합니다 .

그것만으로는 충분하지 않습니다! 따라서window load로드 이벤트가 완료되었는지 여부를 테스트하기 위해 이벤트에간격 검사기를 배치하고 그렇지 않은 경우 트리거합니다. (img load이벤트는 처음로드시에만 트리거 되는 경우가 매우 많으며다음로드시 이미지 소스가 캐시에서 검색 되어 img로드 이벤트가 발생 하지 않습니다. 가 발생 ! )

jQuery(function($){ //ON DOCUMENT READY
  var $window = $(window); //prepare window as jQuery object

  var $srcSets = $('.srcSet'); //get all images with srcSet clas
  $srcSets.each(function(){ //for each .srcSet do...
    var $currImg = $(this); //prepare current srcSet as jQuery object

    $currImg
      .load(function(){ //bind the load event
          var img = $currImg.get(0); //retrieve DOM element from $currImg

          //test currentSrc support, if not supported, use the old src
          var src = img.currentSrc ? img.currentSrc : img.src;

          //To the closest parent with bgFromSrcSet class,
          //set the final src as a background-image CSS
          $currImg.closest('.bgFromSrcSet').css('background-image', "url('"+src+"')");

          //remove processed image from the jQuery set
          //(to update $srcSets.length that is checked in the loadChecker)
          $srcSets = $srcSets.not($currImg);

          $currImg.remove(); //remove the <img ...> itself 
      })
    ;      

  });

  //window's load event is called even on following loads...
  $window.load(function(){    
    //prepare the checker
    var loadChecker = setInterval(function(){
        if( $srcSets.length > 0 ) //if there is still work to do...
            $srcSets.load(); //...do it!
        else
            clearInterval(loadChecker); //if there is nothing to do - stop the checker
    }, 150);  
  });

});

HTML

... 다음과 같이 보일 수 있습니다.

<div class="bgFromSrcSet">
  <img class="srcSet"
       alt=""
       src="http://example.com/something.jpeg" 
       srcset="http://example.com/something.jpeg 5760w, http://example.com/something-300x200.jpeg 300w, http://example.com/something-768x512.jpeg 768w, http://example.com/something-1024x683.jpeg 1024w, http://example.com/something-1000x667.jpeg 1000w"
       sizes="(max-width: 2000px) 100vw, 2000px"
  >
  Something else...
</div>

참고 : 클래스 bgFromSrcSet는 자체 로 설정 되지 않아야 img합니다! imgDOM 상위 트리 의 요소로만 설정할 수 있습니다 .