javascript - 图像无法响应 AnythingSlider

Question

在我的网页中，我有一个 anythingsider 正在运行。看起来像这样

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

我的 slider 图像看起来像这样

但是当屏幕分辨率很低(如 1366x768)时，图像不会响应。网络上只显示了图像的一小部分。任何人都可以告诉我我在这里做错了什么吗？

Note: CodePen Link to my demo source

Answer 1

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

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

现在这仍然需要一些调整，因为如问题评论中所述:

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

最后的代码是这样的:

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

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