1

所以我试图让我的网站具有超级响应能力，但我想包含我找到的这个图像滑块。我能够使滑块的宽度具有响应性，这样当窗口缩小时，图像也会随之缩小。不幸的是，我无法让滑块的高度适应其中图像的高度。有什么办法可以用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>
4

1 回答 1

0

也许如果您使用 jsFiddle，我们可以看到 CSS 以及 HTML 和 jQuery。我只是在学习，所以请原谅这个问题，但我不明白容器的宽度设置为 100% 但高度为 325。你不必说 325px 或其他什么吗？

于 2013-08-14T06:39:06.570 回答