图像没有响应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，图像不会起到响应的作用。只有少部分图像显示在网页上。任何人都可以告诉我这里我做错了什么吗？

  

注意：CodePen Link到我的演示源

Answer 1

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

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

现在仍然需要进行一些调整，因为问题评论中指定了：

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

最后代码如下：

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

当页面加载和页面调整大小时，必须调用该代码。你可以see it working on this Codepen。