我在尝试制作包含响应式图像 slider 的包装器时遇到了很多麻烦，我希望它在重新调整窗口大小时相应地缩小，但我做不到，图像 slider 不会缩放向下。有人可以告诉我我做错了什么吗？
注意*我只想让它在桌面和平板电脑上响应低至 500 像素，移动设备有不同的外观)
(我很抱歉，如果它草率，我是新手)
编辑:这是它的实时链接(不是真实图像):http://testjd.net46.net/ 当浏览器窗口重新加载时， slider 与“ Logo ”重叠，我可以停止吗？
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.cycle.all.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
prev: '#prev',
next: '#next',
timeout: 0,
rev: false
});
</script>
</head>
<body>
<img src="header.png" width="2022" height="82" alt="header"id="table">
<img src="footer.png" width="2022" height="109" alt="footer" id="table2">
<img src="Background.jpg" name="fsbg" width="2022" height="1460" id="fsbg">
<img src="title.png" alt="title" name="title" width="500" height="500" id="title">
<table width="90%" border="0" cellpadding="7" cellspacing="0" id="table3" name="table3">
<tr>
<td><img src="500x500/Animal-Ambition-2-100percent-new-with-logo.gif" width="500" height="500" alt="aa"><img src="500x500/50 Cent - Pilot.png" width="500" height="500" alt="pilot"><img src="500x500/50 Cent - Smoke.png" width="500" height="500" alt="smoke"><img src="500x500/50 Cent - Everytime I Come Around.png" width="500" height="500" alt="everytime i come around"><img src="500x500/50-Cent---Irregular-Heartbeat.gif" width="500" height="500" alt="irregular heartbeat"><img src="500x500/50 Cent - Hustler.png" width="500" height="500" alt="hustler"><img src="500x500/50 Cent - Twisted.png" width="500" height="500" alt="twisted"><img src="500x500/50 Cent - Winners Circle.png" width="500" height="500" alt="winners circle"></td>
</tr>
</table>
<div id="wrapper">
<div id="container">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="500x500/Animal-Ambition-2-100percent-new-with-logo.gif" width="500" height="500" alt="AA">
<img src="500x500/50 Cent - Pilot.png" width="500" height="500" alt="pilot">
<img src="500x500/50 Cent - Smoke.png" width="500" height="500" alt="smoke">
<img src="500x500/50 Cent - Everytime I Come Around.png" width="500" height="500" alt="everytime i come around">
<img src="500x500/50-Cent---Irregular-Heartbeat.gif" width="500" height="500" alt="irregular heartbeat">
<img src="500x500/50 Cent - Hustler.png" width="500" height="500" alt="hustler">
<img src="500x500/50 Cent - Twisted.png" width="500" height="500" alt="twisted">
<img src="500x500/50 Cent - Winners Circle.png" width="500" height="500" alt="winners circle">
</div>
<div class="controller" id="next"></div>
</div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'my font' ;
src: url(fonts/CuttyFruty.ttf)
}
#wrapper {
display: block;
max-width: 660px;
max-height: 500px;
margin: auto;
position: fixed;
top: 0%;
bottom: 0%;
right: 5%;
}
#container {
display: block;
float: left;
height: auto;
width: 660px;
overflow: aut;
}
#prev {
background-image: url(left%20button.png);
background-position: center center;
display: block;
float: left;
height: 500px;
width: 80px;
position: relative;
z-index: 99;
cursor: pointer;
}
#prev:hover {
background-image: url(left%20button%20grey.png);
}
#next {
background-image: url(right%20button.png);
background-position: center center;
display: block;
float: right;
height: 500px;
width: 80px;
position: relative;
z-index: 99;
cursor: pointer;
}
#next:hover {
background-image: url(right%20button%20grey.png);
}
#slider {
display: block;
height: 500px;
width: 500px;
overflow: hidden;
float: left;
position: relative;
}
body {
background-color: #000;
color: #666;
}
#fsbg {
width: 100%;
height: auto;
position: fixed;
z-index: -100;
left: 0px;
top: 0px;
min-height: 100%;
min-width: 1040px;
}
#shadow {
display: block;
height: 550px;
width: 550px;
margin: auto;
top: 0%;
bottom: 0%;
right: 15%;
position: fixed;
}
#table {
margin: 0;
padding: 0;
position: fixed;
left: 0px;
top: 0px;
height: 82px;
z-index: ;
}
#table2 {
margin: 0 auto;
padding: 0;
left: 0px;
bottom: -15px;
position: fixed ;
height: 100px;
z-index: 0;
}
#table3 {
left: 0px;
position: absolute ;
width: 100%;
display: none;
}
textem {
color: #FFF;
}
.textem2 {
color: #666;
text-align: right;
font: 16px "my font" ;
}
#title {
display: block;
height: 500px;
max-width: 100%;
margin: auto;
top: 0%;
bottom: 0%;
right: 55%;
position: absolute;
}
@media screen and (max-width: 1000px) {
#wrapper, #container, #slider {
width: 100%;
height: auto;
}
}
@media screen and (max-width: 500px) {
#wrapper, #container, #slider {
padding: 0px !important;
display: none !important;
}
#prev {
width: 80px;
height: 200px;
position: fixed;
left: 20%;
top: 65%;
padding: 0px !important;
}
#next {
width: 80px;
height: 200px;
position: fixed;
right: 20%;
top: 65%;
padding: 0px !important;
}
img {
width: 100%;
height: auto;
margin: auto;
padding: 0px;
left: 0px;
top: 0px;
right: 0px;
display: block;
}
#table3 {
left: 0px;
position: absolute ;
width: 100%;
display: block !important;
}
#table1 {
z-index: 50;
top: 0;
position: fixed;
}
#table2 {
z-index: 50;
bottom: 0;
position: fixed;
height: 10%;
}
}
最佳答案
我看到了一个问题，它可能是手头的问题。大概就是这么简单，大家都忽略了。我附上了上面 css 文件的屏幕截图图像。你的宽度(编辑:不是宽度，溢出)应该设置为“自动”，但你在那里写了“aut”。 Screenshot of CSS Above
关于html - 使包装器/容器响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24050792/