치수를 지정하는 대신 background-size : cover를 사용하면서 이미지를 망막이 가능합니까?

Question

그래서 웹 사이트의 망막 그래픽에 대해 몇 가지 내용을 읽었으며 대부분의 이미지가 2X 일 수 있으므로 추측 할 수 있습니다. @media queries을 사용하는 이유는 무엇입니까?

그러나 크기 조정에 대해 알아낼 수있는 것은 치수를 지정해야한다는 것이었지만 궁금한 점은 배경 이미지가 background-size:cover 인 경우는 어떨까요?

에서와 마찬가지로 : 나는 수도 경우

div { 
    background-image: url('../images/foo.png'); 
    background-size:cover; 
    height:100%; 
    width:100%; 
    // max-size:1920px by X 
} 

@media 
only screen and (-webkit-min-device-pixel-ratio: 2)  and (min-width: 1921px), 
only screen and ( min--moz-device-pixel-ratio: 2)  and (min-width: 1921px), 
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1921px), 
only screen and (  min-device-pixel-ratio: 2)  and (min-width: 1921px), 
only screen and (    min-resolution: 192dpi) and (min-width: 1921px), 
only screen and (    min-resolution: 2dppx) and (min-width: 1921px) { 
    div { 
     background-image: url('../images/foo@2x.png'); 
     background-size:cover; 
     height:100%; 
     width:100%; 
     // min-size:1921px by X 
    } 
} 

두 번째 질문 : 당신이 최대 약 2400x1380의 이미지를했습니다했으나 원정 기계 맥북 15로, 2880x2160의 최대 해상도가있는 경우 " 망막 - 따라서 2X 경험 @ 전체 서버 수 없다는가 - 일반, 최대 1920px 이미지를 상관없이 2 배 @ 봉사하지 않거나 제공

그리고 세 번째, 관련 1 & 2 - :cover을 사용하는 동안 ' 차원을 지정하지 않아서 @ 2x 이미지의 최소값을 알지 못한다는 것을 염두에 두어야합니다. "ret 이미지를 넣고 :cover을 사용하면 이미지가 이상이어야합니다.이 치수로 "?

감사합니다.

Answer 1

첫 번째 질문에 대답하려면 다음과 같이하십시오. 예, background-size : cover로 이미지를 망막 할 수 있습니다. div를 정의하고 해당 배경을 그 두 배의 크기로 덮고 이미지로 만들려면 retina (@ 2x)가됩니다.

나는 당신이하려고하는 것이 실제로 망막을 최적화하는 올바른 방법이 아니라고 생각하기 때문에 귀하의 다른 질문이나 답변에 대해서는 자세히 설명하지 않겠습니다!

모든 장치에 가장 적합한 망막 이미지를 처리하는 가장 좋은 해결책은 @media 쿼리를 사용하여 특정 클라이언트 장치 (예 : @ 1.5x, @ 2x, @ 3x ...)에 대한 최상의 이미지를 제공하는 것입니다. . 내 블로그 게시물을 통해 완벽한 해결책을 찾으십시오. http://blog.benmarten.me/best-way-to-optimize-website-images-for-all-possible-retina-sizes/