Foundation Zurb 中的图像缩放答案

【问题标题】：Image Scaling in Foundation ZurbFoundation Zurb 中的图像缩放
【发布时间】：2013-12-28 13:54:07
【问题描述】：

我正在使用 Foundation Zurb 5 构建一个网站。该网站将有一个带有 h1 标签的页面来显示页面标题。在标题下方，我想显示高分辨率图像。就其本身而言，图像的分辨率为 1920 x 1200。此图像将用于页面的大版本以及移动版本。

当图像出现在某人的计算机上时（大版本），我希望它的最大高度为 200 像素。这目前有效。但是，当在移动设备上查看图像时，我希望它按比例缩小以占据设备的整个宽度。后一个要求不起作用。目前，我正在尝试以下方法：

<div class="th">
  <img src="/res/img/sample-01.jpg" style="max-height:200px; max-width:100%;">
</div>

我怀疑这个问题与横向与纵向观看有关。但是，我不确定。同时，我不确定如何完成我正在尝试的事情。有谁知道如何做到这一点？如果有，怎么做？

【问题讨论】：

标签： css zurb-foundation

【解决方案1】：

也许你应该尝试使用背景图片：

例如：

.th{
  background-repeat: no-repeat;
  background-size: cover;  
  background-position: center center;
}

<div class="th" style="background-image: url(/res/img/sample-01.jpg)">

</div>

【讨论】：

【解决方案2】：

我建议查看Interchange 并修改实际图像。这样您就不会在某人的移动设备上加载 1920 x 1200 的大图像。我相信这是一个更优雅的解决方案，但我不确定您对图像处理是否满意。

另一种方法是使用Visibility Classes。如果你走这条路，你可以有两个 div 或两个 img。一种用于使用 show-for-large-up 类的大屏幕（桌面），另一种用于使用 hide-for-large-up 的小屏幕（平板电脑/手机）。

【讨论】：