유체 디자인 이미지가 정확하게 축척되지 않습니다

Question

유체 설계에 문제가 있습니다. 여기 내 테스트 사이트 - www.lync-star.com

브라우저 창이 축소되면 모든 이미지의 크기가 올바르게 조절됩니다. 화면이 작아 질 때

그러나 (약 내가 전화 크기 360 X 640), 이미지가 어떻게이 문제를 해결 얻을 수

(예를 들어 상단 이미지) 텍스트와 제목에 비해 매우 작은 ? 더 큰 다른 이미지를로드하려면 미디어 쿼리를 사용해야합니까?

위의 내용이 의미가 있으시길 바랍니다.

최저

, 페이지

Answer 1

그것은 이미지의 비율입니다. 이미지가 ~ 800x270이고 max-width이 100% 인 경우 이미지의 너비가 줄어들면서 그 비율이 유지됩니다. 페이지가 작아 지거나 텍스트가 다른 프로퍼티로 이미지를로드해야 할 때 텍스트 쿼리를 사용하여 텍스트 크기를 줄여야합니다. 어떤 경우

, 이것은 당신이 그것을

media(min-width: 768px) // Obviously, change 768 to whatever you desire 
{ 
    // Any rules applied inside of this media(){} block will be 
    // applied on browser windows wider than 767px 
    div#header_img 
    { 
     background-image: url('path/to/img.png'); // Normal header image 
    } 
} 

media(max-width: 767px) 
{ 
    div#header_img 
    { 
     background-image: url('path/to/img.png'); // Alternative image, perhaps taller? 
    } 
} 

같은 원칙뿐만 아니라 텍스트 크기에 적용 할 수 할 거라고 방법이다. 미디어 here 및 here를 쿼리에 대한 읽기를 가지고

또한 background-size 함께 놀러하고 정신과의 배경 인 div으로 시도하고 이미지가 같은 크기를 유지하도록 그것을 만들지 만, 그것의 적은 볼 수 있습니다 .