javascript - 如何使 slider 的高度与图像相对于窗口宽度的高度相匹配？

Question

因此，我正在努力使我的网站具有超强的响应能力，但我想包括我找到的这个图像 slider 。我能够使 slider 的宽度具有响应性，这样当窗口缩小时，图像也会缩小。不幸的是，我无法让 slider 的高度调整到其中图像的高度。有什么办法可以用 javascript 或 css 做到这一点吗？这是 html 中的 slider 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 什么的吗？