我创建了一个 jQuery 幻灯片，获取了一组 6 个相同大小的图像，并在 CSS 代码中将它们全部设置为 100%，以便它们会随窗口调整大小（这是全屏幻灯片）。但是，一旦我通过单击启动幻灯片放映，调整大小似乎不再起作用。图像保持第一次调整大小后的大小并且永远不会改变。我尝试过不同的 jQuery 插件，但似乎找不到一个适合我的需求。如果可能的话，我想避免添加另一个 jQuery 库（这让我感觉自己像个脚本小子）并使用 Cycle 库、jQuery vanilla、css、javascript、html 等解决这个问题。
这是我当前的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lorena Gaxiola</title>
<style type="text/css">
body {background: #222; font-family:Georgia, "Times New Roman", Times, serif; font-size:11px; margin:50px; color:#999}
ul li{line-height:20px;}
.new{margin-top:15px}
a{color:#fff; text-decoration:none; font-style:italic;}
a:hover{text-decoration:underline}
h1{font-size:16px; text-transform:uppercase; font-weight:normal; color:#fff; letter-spacing:1px;}
h2{font-size:12px; text-transform:uppercase; font-weight:normal; color:#999; letter-spacing:1px;}
#myslides img {height:100%; width:100%;}
</style>
<script type="text/javascript" src="jquery/jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 10,
next: '#myslides',
timeout: 0,
});
});
</script>
</head>
<body>
<center>
<div id="myslides">
<div id="img 1">
<center>
<img src="img/1.jpg"/>
</center>
</div>
<div id="img 2">
<center>
<img src="img/2.jpg"/>
</center>
</div>
<div id="img 3">
<center>
<img src="img/3.jpg"/>
</center>
</div>
<div id="img 4">
<center>
<img src="img/4.jpg"/>
</center>
</div>
<div id="img 5">
<center>
<img src="img/5.jpg"/>
</center>
</div>
<div id="img 6">
<center>
<img src="img/6.jpg"/>
</center>
</div>
</div>
</center>
</body>
</html>
这种开放式人工智能合作关系很糟糕，而且是个坏主意