Question

所以我试图让我的网站超级响应，但我想要包含我找到的这个图像滑块。我能够使滑块的宽度响应，这样当窗口缩小时，图像也会缩小。不幸的是，我无法将滑块的高度调整到其中的图像高度。有什么方法可以用javascript或css做到这一点吗？这是html中的滑块javascript：

<div id="slider_container_2" class="canvas">
    <div id="SliderName_2" class="SliderName_2">
        <img src="demo_2/img/1.jpg" usemap="#img1map" />
        <map name="img1map">
            <area href="#img1map-area1" shape="rect" coords="100,100,200,200" />
            <area href="#img1map-area2" shape="rect" coords="300,100,400,200" />
        </map>
        <!-- Description <div class="SliderName_2Description">College Graduations 2013</div> -->
        <img src="demo_2/img/2.jpg" />
        <img src="demo_2/img/3.jpg" />
        <img src="demo_2/img/4.jpg" />
        <img src="demo_2/img/5.jpg"/>
        <img src="demo_2/img/6.jpg" />
        <img src="demo_2/img/7.JPG" />
        <img src="demo_2/img/8.jpg" />
    </div>
    <div class="c"></div>
    <div id="SliderNameNavigation_2"></div>
    <div class="c"></div>
    <script type="text/javascript">
        effectsDemo2 = 'rain,stairs,fade';
        var demoSlider_2 = Sliderman.slider({container: 'SliderName_2', width: '100%', height: 325, effects: effectsDemo2,
            display: {
                autoplay: 5000,
                loading: {background: '#000000', opacity: 0.5, image: 'demo_2/img/loading.gif'},
                buttons: {hide: true, opacity: 1, prev: {className: 'SliderNamePrev_2', label: ''}, next: {className: 'SliderNameNext_2', label: ''}},
                description: {hide: false, background: '#000000', opacity: 0.4, height: 50, position: 'bottom'},
                navigation: {container: 'SliderNameNavigation_2', label: '<img src="demo_2/img/clear.gif" />'}
            }
        });
    </script>
    <div class="c"></div>
</div>

Answer 1

也许如果你使用jsFiddle，我们可以看到CSS以及HTML和jQuery。我正在学习这个问题，但我不明白容器的宽度设置为100％，但高度是325.你不必说325px或什么？

如何使滑块的高度与图像的高度相对于窗口的宽度相匹配？

1 个答案: