图像与AnythingSlider没有响应

Question

在我的网页上，我有一个正在运行的人。看上去像这样

<ul id="slider-main">

<li>
    <div class=" right-2 up-3 ">
        <div>
            <img src="http://i.picresize.com/images/2015/08/10/zrsLx.jpg" class="img-responsive" width="1600" height="1070">
        </div>
    </div>
</li>
<li>
    <div class=" right-2 up-3">
        <div>
            <img src="http://i.picresize.com/images/2015/08/10/zrsLx.jpg" class="img-responsive" width="1600" height="1070">
        </div>
    </div>
</li>

​

我的滑雪板图像是这样的

​

但是，当屏幕分辨率较低时，比如1366x768，Image就不起响应作用。只有很少的一部分图像显示在网络上。有谁能告诉我我在这里做错了什么吗？

注意：CodePen链路到我的演示源代码

Answer 1

一个快速的解决方案:更新图像高度以适应视口的高度。

$(".img-responsive").height($(".anythingWindow").height())

现在，这仍然需要一些调整，因为正如问题注释中所指出的：

• 如果屏幕宽度大于图片宽度，则将在图像的右侧显示一个空白。
• 因为有一个页脚，图像的底部仍然被它隐藏，所以你需要调整图片的高度到视图区域的高度--页脚的高度。

最后，代码将如下所示：

$(".img-responsive").height($(".anythingWindow").height() - $("footer > div").height())
                    .width("100%");

当页面加载和页面调整大小时，必须调用该代码。你可以看到它正在处理这个Codepen。