更改纵向和横向 iOS 方向的图像宽度和高度答案

【问题标题】：Change width and height of image for Portrait and Landscape iOS orientation更改纵向和横向 iOS 方向的图像宽度和高度
【发布时间】：2012-06-29 11:30:46
【问题描述】：

我在my site 上使用以下代码来减小 ipad 纵向上 div 的大小，并且它工作成功。

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

但是，当我将方向更改为横向时，div 保持相同的值，而不是返回到 div 的默认较大尺寸。

如果网站直接加载到横向模式 - 它会正确显示（以较大的尺寸）。

当用户从纵向切换到横向时，如何确保应用较大的 css div 尺寸？

【问题讨论】：

标签： ios image landscape dimensions portrait

【解决方案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

【讨论】：

感谢 JunkMyFunk 先生的建议。

【解决方案2】：

这有助于我正确定位 iPad 肖像。事实证明，我正确调整了 .mosaic-block 的大小，但应该调整包含的图像的大小。

我将amazium framework 用于响应式设计，mosaic.js 用于动画翻转。这是完整的 HTML：

<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-image 规则来改变不同分辨率下的图像尺寸：

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

我的解决方案是为 ipad 肖像上的 .max-image 设置特定的图像尺寸：

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

非常感谢 JunkMyFunk 先生的建议。

【讨论】：