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

Program / 글쓴이

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?);
}

답변

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

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

답변

확실히 : 

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

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

답변

솔직히 더 강력한 또 다른 접근 방식은 배경 이미지의 특성과 옵션을 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>

스 니펫 확장

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

답변

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

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

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

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

답변

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

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

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

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

답변

<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>

답변

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