具有设置纵横比的响应式幻灯片答案

【问题标题】：responsive slideshow with set aspect ratio具有设置纵横比的响应式幻灯片
【发布时间】：2012-08-23 03:51:02
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

我可能错过了您在此处询问的内容，但 height:auto 应该是您的“幻灯片”div 的默认值。这就是你的问题吗？

标签： css height response slideshow aspect-ratio

【解决方案1】：

感谢您的回复！在我的情况下，最终起作用的是将我的所有图像包装在另一个空的 jpg（700 字节）图像上，其分辨率与我的幻灯片和 position:relative 相同。它比 javascript 更快更轻，随窗口缩放并且完全尊重文档的“流”。

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

干杯 ;)

【讨论】：

【解决方案2】：

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

【讨论】：

问题在于，当窗口缩放时，固定高度不是。看看我的解决方案！