我正在尝试使用 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>
最佳答案
感谢您的回复! 在我的例子中，最终起作用的是将我的所有图像包裹在另一个空的 jpg(700 字节)图像上，该图像的分辨率与我的幻灯片和位置相同:相对 .. 它比 javascript 更快更轻，随窗口缩放并且完全尊重文档的“流”。
注意:要创建具有自定义尺寸的空 jpg，您可以在标题中找到 0xFFC0 标记。它之后的第3和第4个字节是y维度，第5个和第6个字节是x。
干杯;)
关于css - 具有设置纵横比的响应式幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11583804/