Question

我正在尝试使用Jquery创建一个简单的幻灯片，但是我正在弄乱容器的高度属性。我需要将高度设置为“自动”，因为我希望在调整大小时保持宽高比稳定。这是我的代码示例，谢谢！

<!DOCTYPE html>
<html lang="en-US" dir="ltr"
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.4.1"></script>
        <script type="text/javascript">
            var jq = jQuery.noConflict();
            var i = 0;
            var slides = ["#slide_2", "#slide_1"];
            var imgSrc = new Array(2);
            imgSrc[0] = "banner1.png"
            imgSrc[1] = "banner2.png"
            jq(document).ready(slideShow);

            function slideShow(){
                slides.reverse();
                jq(slides[0]).attr("src", imgSrc[i]);
                jq(slides[0]).fadeIn(1000);
                jq(slides[1]).fadeOut(1000);
                setTimeout("slideShow()", 5000);
                i = (++i >= imgSrc.length)? 0: i;
            }
        </script>
        <style type="text/css">
            .slide {
                position:absolute;
            }
        </style>
    </head>
    <body style="background:#a9a9a9;">
        <headder id="branding" role="banner" style="display:block; background:#d0d0d0; width:100%; height:auto;">
            <h1>Example</h1>
            <div id="slideshow">
                <img id="slide_1" class="slide" src="banner1.png"/>
                <img id="slide_2" class="slide"/>
            </div> <!-- #slideshow -->
        </headder>
        <div id="main">
            <p>Lorem ipsum eu usu assum liberavisse, ut munere praesent complectitur mea. Sit an option maiorum principes. Ne per probo magna idque, est veniam exerci appareat no. Sit at amet propriae intellegebat, natum iusto forensibus duo ut. Pro hinc aperiri fabulas ut, probo tractatos euripidis an vis, ignota oblique ut nec. Ad ius munere soluta deterruisset, quot veri id vim, te vel bonorum ornatus persequeris. Pro hinc aperiri fabulas ut, probo tractatos euripidis an vis, ignota oblique ut nec. Ad ius munere soluta deterruisset, quot veri id vim, te vel bonorum ornatus persequeris.</p>
        </div> <!-- #main -->
        <footer id="last" role="contentinfo" style="background:#3c3c3c;">
            <p style="color:#f9f8f0;">test site</p>
        </footer>
    </body>
</html>

Answer 1

感谢您的回复！在我的情况下，最终工作的是将我的所有图像包裹在另一个空的jpg（700bytes）图像上，其分辨率与我的幻灯片和位置相同：相对...它比javascript更快更轻，与窗口一起缩放，完全尊重文件的“流程”。

注意：要创建具有自定义维度的空jpg，您可以在标题中找到0xFFC0标记。在它之后的第3和第4个字节是y维度，第5和第6个字节是x。

干杯;）

Answer 2

在这里，您可以使用div或任何标记包装所有图像，并为该div应用一些固定高度。这样就不会影响图像的宽高比

具有设置宽高比的响应式幻灯片

2 个答案: