我正在使用Foundation Zurb 5构建网站。该网站将具有一个带有h1标签的页面，以显示页面标题。在标题下面，我想显示一个高分辨率的图像。图像本身的分辨率为1920 x1200。该图像将在页面的大版本以及移动版本中使用。
当图片出现在某人的计算机上（大版本）时，我希望它的最大高度为200像素。目前有效。但是，当在移动设备上查看图像时，我希望图像按比例缩小以使其占据设备的整个宽度。后一个要求不起作用。目前，我正在尝试以下方法：
<div class="th">
<img src="/res/img/sample-01.jpg" style="max-height:200px; max-width:100%;">
</div>
我怀疑该问题与横向查看与纵向查看有关。但是，我不确定。同时，我不确定如何完成自己的尝试。有谁知道如何做到这一点？如果是这样，怎么办？
也许您应该尝试为此使用背景图片：
例如：
.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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句