使包装器/容器响应？答案

【问题标题】：Making wrapper/container responsive?使包装器/容器响应？
【发布时间】：2014-06-05 02:43:41
【问题描述】：

我在尝试制作包含响应式图像滑块的包装器时遇到了很多麻烦，我希望它在重新调整窗口大小时相应缩小，但我无法做到，图像滑块不会缩放向下。有人可以请告诉我我做错了什么吗？

注意*我只想让它在台式机和平板电脑上响应低至 500 像素，移动设备有不同的外观）

（我很抱歉，如果它马虎，我是新手）

编辑：这是它的实时链接（不是真实图像）：http://testjd.net46.net/ 并且当浏览器窗口重新调整时滑块与“徽标”重叠我可以停止吗？

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%;
  }

}

【问题讨论】：

你使用的是固定宽度，试试%。
我试过了，你能看看我下面对 Ezaz & Zoe 的评论吗，谢谢

标签： html css containers wrapper

【解决方案1】：

我看到了一个问题，它可能是手头的问题。大概就是这么简单，大家都忽略了。我附上了上面css文件的屏幕截图图像。你的宽度（编辑：不是宽度，溢出）应该设置为“auto”，但你在那里写了“aut”。Screenshot of CSS Above

【讨论】：

【解决方案2】：

从你的标签中删除高度和宽度，并通过 Css 给它 width:100%

【讨论】：

谢谢，我刚刚尝试过，但没有用，我将每个宽度都更改为 100%，发生的事情是滑块跳过页面，我认为是因为滑块在包装器中有问题，但我不知道如何解决。这是我制作的内容的实时链接（不是真实图像）testjd.net46.net 我正在尝试使用浏览器获取滑块的比例，并且它与我需要修复的“徽标”重叠

【解决方案3】：

我在这里看到了几个问题。

首先，您的意思是响应式，还是流畅？如果您只是在寻找一种以非常基本的方式随着窗口大小延伸的流畅解决方案，@ezaz 建议用100% 替换width 属性是很划算的。

如果您希望更进一步，并根据浏览器的宽度推送不同的样式，您需要研究@media queries。这些将允许您以更大的控制力操纵元素。例如，如果您想在较小的屏幕上显示较小的按钮，您可以执行以下操作：

@media (min-width: 500px) {
    #next {
        height: 500px;
        width: 80px;
        /* etc... */
    }
}

@media (max-width: 499px) {
    #next {
        height: 200px;
        width: 40px;
        /* etc... */
    }
}

【讨论】：

感谢您的评论，我认为有响应吗？我希望它与浏览器窗口一起缩小，所以如果我调整窗口大小说 20 像素，滑块也会缩小 20 像素。这对我不起作用，我试过这个：@media (max-width: 1000px) { #wrapper, #container, #slider { height: 400px;是因为 ive 包装器中的滑块不会按比例缩小