가로로 전환 할 때 이미지 순서 변경

Question

현재 클라이언트 용 모바일 웹 사이트에서 작업하고 있지만 다음 작업을 수행 할 수는 없습니다. 이 모바일 사이트의 홈페이지는 사용자가 선택하는 2 개의 큰 이미지로 나뉩니다. 세로 모드는 다음 코드를 사용하여 이미지를 홈페이지에 스태킹하여 완벽하게 작동합니다.

<p><a href="/female"><img alt="" src="image1.jpg" style="width: 100%; height: 51%; position: absolute; margin-top:0; left:0; right:0;" /></a> 
<a href="/male"><img alt="" src="image2.jpg" style="width: 100%; height: 49%; position: absolute; bottom:0; left:0; right:0;" /></a></p> 

이 세로 모드에서 동안 모든 장치에서 완벽하게 잘 작동하지만 문제는 바로 이러한 장치가 세로 모드에서 사용되는 바와 같이, 이미지가 너무 많이 뻗어받을 것입니다. 물론 이것은 100 % 너비 때문입니다.

이상적인 상황에서; 풍경으로 전환 할 때 전혀 다른 이미지가 서로 겹치지 않습니다.

예;

 ___     ________ 
    | 1 |    | 1 2 | 
    |_2_|    |________| 
Portrait mode   Landscape mode 

제 그림이 의미가 있습니다.

Answer 1

나는 이것을 수행하는 데 javascript를 사용하기 때문에 모든 모바일 브라우저/장치 또는 resize 이벤트에서 지원되지 않는 onorientationchange 이벤트를 사용할 수 있습니다. orientation이 portrait 경우에만

Answer 2

당신은, 규칙이 적용되는 특성 orientation에 대해 쿼리 @media 규칙을 사용할 수 있습니다 (기본값은 풍경입니다) :

여기

img { 
    width: 100%; 
    height:100%; 
    box-sizing:border-box; 
    border:1px solid green; 
} 
a { 
    display:inline-block;  
    width:50%;   
} 
@media only screen and (orientation:portrait) { 
    a { 
    display:block;   
    width:100%; 
    } 
} 

이를 테스트하려면 working fiddle. 입니다 바이올린, 당신은 풍경에서 초상화로 또는 그 반대로 변경되도록 디스플레이 창 크기를 조정해야합니다.