2013-08-10 3 views
1

를 커버 : 커버를하고 난 그냥 이미지를해야 할, 내 이미지는 2880x1880의 해상도를 가진 망막 맥북 프로에 잘 보이는 있는지 확인하려면 (당신이 800 픽셀 X 400 픽셀 말에 사이트의 이미지를 가지고 있지만 망막에 좋아 보인다 수 있도록 400 픽셀 X 200 픽셀로 표시 될 때와 같이)가 망막이기 때문에 그 해상도, 또는 두 배 해상도가 좋은보고 할 필요가 없습니다.망막 디스플레이 배경 사이즈 : 나는 배경 사이즈 사용하고있는 경우

.bg { 
    color:#CCC; 
    background-attachment:fixed; 
    background-repeat: no-repeat; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    background-size: cover; 
    margin: 0; 
    padding: 0; 
    } 

감사합니다.

답변

1

약 영상 장치의 해상도를 확인합니다. 브라우저/웹 클립 크롬을 약간 조정하여 최종 이미지 크기가 조금씩 다를 수 있습니다.

자세한 내용은 Custom Icon and Image Creation Guidelines를 참조하십시오. 장치 독립형 픽셀의 물리적 픽셀의 배급 인 -

추가 배경

망막 디스플레이 장치 (2)의 devicePixelRation있다. quirks mode에서 :

강하는 너비/높이 미디어 질의 및 메타 뷰포트 소자 폭에 정보를 공급하기 위해 사용되는 추상적 인 화소이다. 그들은 과 망막이 아닌 망막 의 차이점을 가장 잘 설명합니다. 당신은 당신의 마크 업을 레이아웃

   DIPS  Physical 
       -------- --------- 
non-retina: 768x1024 768x1024 
    retina: 768x1024 1536x2048 

DIPS를 기반으로하지만, 이미지를 사용 : 당신은 당신이 (Safari always uses DIPS - see quirksmode)로 끝날 것 장치 폭 뷰포트를 설정한다면, 예를 들어 아이 패드를 촬영

물리적 픽셀 (망막 디스플레이의 경우 x2)을 기반으로합니다.

이 바라 보는 또 다른 방법은 다음과 같습니다 망막에 대한 엄지 손가락의 규칙이 아닌 망막 이미지의 크기 2 배이기 때문에, 망막에 대한 2x (768x1024)를 사용하거나 : 또한 1536x2048

을 촬영 부동산 조심 브라우저 크롬에 의해. 예를 들어 상태 표시 줄은 전체 화면에서 20 픽셀을 차지합니다.

+0

위대한 설명, 또한 다른 망막 유형을 지원하는 방법을 멋진 튜토리얼 내 블로그 게시물을 체크 아웃 (예 : @ 배, @ 배) : http://blog.benmarten.me/best-way-to-optimize- 웹 사이트 - 이미지를 위해 모든 가능한-망막 크기/벤 - 담비 @ –

+0

당신이 링크가 작동하지 않는 것 ... –

+0

확인이 : https://blog.benmarten.me/2014/10/11/ 최선의 방법 - 최적화 - 웹 사이트 이미지 - 모든 가능성 - 망막 크기 / –