3
我在嘗試製作包含響應式圖像滑塊的包裝時遇到了很多麻煩，我希望它在縮放窗口時相應縮小，但我無法獲得它，圖像滑塊不會縮小。有人可以請告訴我我做錯了什麼嗎？使包裝/容器響應？
注*我只是想讓它響應在臺式機和平板電腦降至500像素，手機有着不同的外觀）
（我很抱歉，如果它的不拘小節，我是新來的這個）
編輯：繼承人鏈接到它（不是真實圖像）：http://testjd.net46.net/ 和滑塊是重疊的「標誌」瀏覽器窗口rezied時，我可以阻止？
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%;
}
}
您正在使用固定的widhts，請嘗試％。 –
我試過了，你能看看我的評論下面Ezaz＆Zoe感謝 – Dunne08