Nivo Slider如何自动调整大小以适应不同的视口大小？

Question

之前我曾问过类似的事情，但我想我并不是很清楚，这可能就是为什么我的问题被投了两次。让我看看我是否可以在这里说明一点。

我在网站上使用Nivo Slider我正在处理我的行为，特别是因为它在我使用不同视口大小时会自动调整大小。它在我的显示器上运行良好，它在我的智能手机上运行良好，并且在我的平板电脑上运行良好。它像魔术一样调整大小！

我已经阅读了所有代码，但我无法找到Nivo Slider的功能。没有媒体查询或视口元标记。我真的很想让我的网站按照Nivo Slider的方式调整大小。

很乐意听到所有熟悉Nivo Slider的人或者可能会帮助我的人。

如有必要：http://dev7studios.com/plugins/nivo-slider

Answer 1

我喜欢这样使用它，以便在没有问题的情况下获得响应：

css

 #nivoSlider, #nivoSlider img{width:100%;height:auto !important}

HTML：

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="nivoSlider" class="nivoSlider">
       <img src="" />
    </div>
</div>

Answer 2

刚想通了：它使用了width:100%。我没有意识到这可能很容易。

.nivoSlider {
    position:relative;
    width:100%;
    height:auto;
    overflow: hidden;
    left:0;
    margin-top:100px;
}

.nivo-main-image {
    display: block !important;
    position: relative !important; 
    width: 100% !important;
}