css - Foundation Zurb 中的图像缩放

Question

我正在使用 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>

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

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>