표지를 확대/축소하려면 어떻게합니까?

Question

웹용 커버 페이지를 만들었습니까? 확대/축소를 비활성화하거나 효과를 시뮬레이션하여 이미지, 슬로건 및 로고가 항상 동일한 크기가되도록하려면 어떻게해야합니까?

Answer 1

당신은 HTML 문서에 다음과 같이 태그를 삽입하여 모바일 장치에 대한 확대 해제 할 수 있습니다

당신이 좋아하는 브라우저 확대 해제 할 수 없습니다 : (https://gist.github.com/JiLiZART/3132542 및 How can I "disable" zoom on a mobile web page?에 대한 추가 정보를 사용할 수)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

크롬 (ctrl +, ctrl -, cmd +, cmd -, 스크롤 휠 등). 이 렌더링은 브라우저에서 처리되며 슬로건과 로고가 서로 다른 크기로 왜곡되지 않도록하려면 반응 형 CSS 스타일링을 제안하는 것이 가장 좋습니다. (disable the CTRL/Wheel zoom effect at runtime에서 자세한 정보 참조)

마지막으로 엉뚱한 옵션은 슬로건과 로고를 내장 플래시 객체로 만드는 것이지만 권장하지 않습니다.

Answer 2

이미지를 배경으로 DIV에 추가하고 크기를 DIV로 설정할 수 있습니다. 사용자가 줌을하더라도 이미지는 크기를 유지합니다.

<div id="the_img"> 
</div> 

그리고 CSS :

#the_img { 
    width: auto; 
    height: 300px; /* Preferred size */ 
    background-image: url('http://i.imgur.com/JNY1o.jpg'); /* image */ 
    background-size: cover; 
    background-position: center center; 
} 

확인 난 항상 ...이 투쟁 http://jsfiddle.net/4MFpu/