Question

我在此网站上设置了幻灯片，以便做出响应，但现在我需要使用内部图像调整容器高度。

http://www.yourwhiteknight.com/test/

HTML：

<div id="feature">
    <div class="topshadow clearfix" style="position: relative; width: 1113px; height: 335px;">
        <div class="feat_box first" style="display: none; position: absolute; top: 0px; left: 0px; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://www.yourwhiteknight.com/wp-content/uploads/2014/08/Company-Photo_MF-RE-Page-Slide-Show.jpg">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://www.yourwhiteknight.com/wp-content/uploads/2015/11/New-Home-Page-Photo-copy-2.jpg">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://yourwhiteknight.com/wp-content/uploads/2012/10/iStock_000016899532Medium.jpg">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://yourwhiteknight.com/wp-content/uploads/2012/10/iStock_000018818618Medium.jpg">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://yourwhiteknight.com/wp-content/uploads/2012/10/iStock_000002082925Medium.jpg">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://yourwhiteknight.com/wp-content/uploads/2012/11/golf2.jpg">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 335px;">
            <div class="textwidget">
                <p><img src="http://yourwhiteknight.com/wp-content/uploads/2012/10/Sunnyside-015.jpg">
                </p>
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://yourwhiteknight.com/wp-content/uploads/2012/10/iStock_000018294410Medium.png">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://www.yourwhiteknight.com/wp-content/uploads/2012/10/cars.1200.jpg">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 11; opacity: 1; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://www.yourwhiteknight.com/wp-content/uploads/2012/10/balloons-1200.jpg">
            </div>
        </div>
    </div>
</div>

看起来它是.topshadow类，但我不确定应该放在这里。

Answer 1

在您的高度和宽度上使用vw，因此屏幕宽度的百分比与固定的px高度和宽度相反。设置固定的高度和宽度也可以覆盖你所使用的类，所以使用响应值如vw，vh或％，或者不要给它们高度和宽度，让你的类来处理所有这些。

Answer 2

我建议像这样创建一个灵活的div：

HTML

npm

CSS

<div id="flex"> Your slider </div>

Answer 3

我接受了Geckob的评论，并为响应主题添加了一个新的滑块。谢谢大家的建议，但这似乎是最简单的解决方案。

响应容器高度

3 个答案: