전체 화면의 작은 그림에 대한 반응 형 디스플레이

Question

일반 전화 장치 크기와 같은 크기의 그림 (치수 320px x 480px)이 있습니다. 나는이 그림에 반응하는 디스플레이를 만들고 싶다. 그림을 모바일 장치에 그대로 표시하려고합니다. 동안, 나는 바탕 화면의 중앙에 (그리고 다른 큰에서) 장치 이미지를 표시 할

참고 : 둥근 모서리 빨간색 사각형 위의 스크린 샷에서 사진을 보여주고있다. 검은 색 사각형은 위의 스크린 샷에서 장치를 보여줍니다.

내 HTML (이 HTML은 모바일 장치에 대한 작동합니다. 그러나이 바탕 화면에서 작동하지 않습니다)

<table width="100%" border="0" align="center"> 
     <tr> 
      <td align="center"> 
       <img src="images/picture.jpg" style="max-width:100%;width:100%;height:auto;" /> 
      </td> 
     </tr> 
    </table> 

Answer 1

, 다음은 position:fixed 또는 absolute

을 추가 할 수 있습니다

@media only screen and (max-width: 539px) { 
    table { 
     width:100vw; 
     height:100vh; 
    } 
} 

사용 CSS media queries입니다

@media (max-width: 539px) { 
     table { 
      position:fixed; 
      top:0; 
      left:0; 
      width:100vw; 
      height:100vh; 
     } 
}