Css 设置纵横比的响应式幻灯片放映_Css_Height_Response_Slideshow_Aspect Ratio

Css 设置纵横比的响应式幻灯片放映

css

Css 设置纵横比的响应式幻灯片放映,css,height,response,slideshow,aspect-ratio,Css,Height,Response,Slideshow,Aspect Ratio,我试图用Jquery创建一个简单的幻灯片，但是我弄乱了容器的高度属性。我需要的高度是“自动”，因为我想保持稳定的纵横比时，调整大小。下面是我的代码示例，谢谢 <!DOCTYPE html> <html lang="en-US" dir="ltr" <head> <meta charset="UTF-8"> <title>test</title> <script type

我试图用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>


=imgSrc.长度）？0:i；
}
.幻灯片{
位置：绝对位置；
}
例子
欧盟通常都是自由主义者，而不是完全的自由主义者。坐在一个选项maiorum principes。这是一个巨大的问题，它是一个位于自然法庭的知识产权机构。这是一个值得注意的问题，它是一个值得注意的问题。我们需要一个解决方案，这是一个真正的解决方案。这是一个值得注意的问题，它是一个值得注意的问题。我们需要一个解决方案，这是一个真正的解决方案
试验现场

在这里，您可以用一个div或任何标签包装所有图像，并对该div应用一些固定高度。这样，它不会影响图像的纵横比

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

谢谢您的支持响应！在我的例子中，最终有效的方法是将我的所有图像包装在另一个空jpg（700字节）图像上，分辨率与幻灯片和位置相同：relative。。它比javascript更快、更轻，可以随窗口缩放，并且完全尊重文档的“流”

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

干杯；）

感谢您的回复！在我的例子中，最终有效的方法是将我的所有图像包装在另一个空jpg（700字节）图像上，分辨率与幻灯片和位置相同：relative。。它比javascript更快、更轻，可以随窗口缩放，并且完全尊重文档的“流”

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

干杯；）

我可能遗漏了你在这里提出的问题，但是高度：自动应该是“幻灯片”分区的默认值。这就是你的问题所在吗？我可能遗漏了你在这里提出的问题，但是高度：自动应该是“幻灯片”分区的默认值这就是你的问题所在吗？问题是当窗口被缩放时，固定的高度就没有了。看看我的解决方案！这样做的问题是，当缩放窗口时，固定的高度不是固定的。看看我的解决方案！