세로 및 가로 iOS 방향의 이미지 너비 및 높이 변경

Question

my site에 다음 코드를 사용하여 ipad 세로 방향의 div 크기를 줄이고 성공적으로 작동하고 있습니다. 내가 가로로 방향을 변경할 때

@media only screen and (min-width: 768px) and (max-width: 959px) { 
    .mosaic-block { 
     width: 226px; 
     height: 135px; 
    } 
} 

그러나, 사업부 대신 기본 사업부의 더 큰 크기로 돌아 동일한 값을 유지합니다.

사이트가 직접 가로 모드로로드 된 경우 -이 (큰 크기)이 올바르게 표시됩니다.

사용자가 방향에서 가로 방향으로 전환 할 때 더 큰 CSS div 치수가 적용되는지 어떻게 확인할 수 있습니까?

Answer 1

미디어 쿼리가 정확하다고 생각하지 않습니다. 회전 할 때 ipad 너비/높이가 변경되지 않고 방향 만 변경됩니다. 같은에 미디어 쿼리를 업데이트하십시오 :

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    .mosaic-block { 
    /* default size here */ 
    } 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    .mosaic-block { 
    width: 226px; 
    height: 135px; 
    } 
} 

참조 : CSS-Tricks media queries

Answer 2

이 날 제대로 아이 패드 초상화를 대상으로 도왔다. 내가 모자이크 블록의 크기를 올바르게 조정했으나 포함 된 이미지의 크기를 조정해야합니다.

응답 성있는 디자인에는 amazium framework을 사용하고 애니메이션 롤오버에는 mosaic.js을 사용하고 있습니다.

<div class="mosaic-block fade"> 

<a href="image.jpg" rel="shadowbox" target="_blank" class="mosaic-overlay details" 
title="Title"> 
     <h4>A title</h4> 
     <p><span>Subheading:</span></p> 
     <ul> 
      <li><p>Some text</p></li> 
      <li><p>Some more text</p></li> 
      <li><p>Even more text</p></li>                
     </ul> 
</a> 
<div class="mosaic-backdrop"><img src="backdrop_image.jpg" class="max-image"/></div> 

Amazium이 서로 다른 해상도에서 이미지 크기를 변경하도록 .max 이미지의 규칙을 사용합니다 : 여기에 전체 HTML은

.max-image { width:100%; height:auto; } 

내 솔루션은 특정 이미지를 설정하는 것이 었습니다 아이 패드 초상화 .max - 이미지 크기 : 조언 씨 JunkMyFunk에 대한

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
.max-image { 
width:286px; 
height:171px; 
} 
} 

많은 감사합니다.