Question

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

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

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

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

Answer 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>

Answer 2

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

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

基础Zurb中的图像缩放

2 个答案: