0

我正在为教育目的创建一个切片滑块来尝试响应式设计。

我已经尝试了 3 天以使其具有响应性，但我尝试的一切都没有奏效。

每当有人将鼠标悬停在页面背景上时，div将显示一个隐藏的内容，其中包含 4 个图像。当我放大时，最后一张图像正在改变位置。

这是我的代码：

<div class="container">
   <div class="reveal unreveal">
    <div  class="caption">
     <div class="contContainer">
      <div class="imgContainer">
       <img src="css/image1.png" />
      </div>
      <div class="imgContainer">
       <img src="css/image2.png" />
      </div>
      <div class="imgContainer">
       <img src="css/image3.png" />
      </div>
      <div class="imgContainer2">
       <img class="yoloimg" src="css/image4.png" />
      </div>
    </div>
   </div>
 </div>
</div>

CSS：

body {
  background: #222;
  max-width:100%;
  min-width:80%;
}
.contContainer {
width:90%;
padding:5px;
margin:0 auto;
}
.imgContainer {
width:20%;
padding:0px;
margin:0 auto;
text-align:center;
position:relative;
float:left;
margin-left:5px;

}
.imgContainer2 {
width:38%;
padding:0px;
margin:0 auto;
text-align:center;
position:relative;
float:left;
}
.yoloimg {
width:94%;
height:auto;
}
.imgContainer img {
width:96.8%;
height:auto;

}
.unreveal {

  background: url("ayo_bottom.png") 0px 278px, url("ayo_top.png") 0px 0px, #ffffff;
  background-repeat: no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  background-size:contain;
  transition: background-position 0.3s ease;
}

 .unreveal:hover {
   background-repeat: no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  transition: background-position 0.3s ease;
  background: url("ayo_bottom.png") 0px 500px, url("ayo_top.png") 0px -50px, #ffffff;
  background-repeat: no-repeat;
  background-size:contain;
}

.reveal {
  max-width:1100px !important;
  width:100%;
  height:auto;
  min-height:800px;
  float: left;
  margin:0 auto;
}

div.caption {
        top: 32%; 
        max-width:1100px;
        position: absolute;
        margin:0 auto;
        display:none;
    background:#2b2a28;

}

我使用 Skeleton 2.0.4（也使用了 Bootstrap，但什么也没发生）。我认为问题在于我在.unreveal课堂上使用 2 张图片作为背景，但我不知道我还需要做什么。我使用max-width:everywhere, margin:0 auto并且我有来自骨架的媒体查询。

如果有人想看一眼，我上传了它： test-site。

提前致谢。

编辑：修复图像重新定位后，容器仍然存在问题。当我放大时，高度正在上升，停止在2400px 发生的事情的 img 处。我max-height:1100px在容器和身体上使用过，但不起作用。我使用了不同的文档类型也没有结果。

4

1 回答 1

1

您看到的问题是您的 % 宽度：

.imgContainer {
  width: 20%;
  padding: 0px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  float: left;
  margin-left: 5px;
}

当你达到 765px 宽时，你会得到每个的 20%（153px 计算）加上左边距的 5px：158 x 3 = 474

您 imgContainer2 的宽度为 38%，当您位于 765px 时，它会将其推过并强制将其移至下一行。要么完全去掉 margin-left，要么写一个 765px 的媒体查询：

@media screen and (max-width: 765px) {
    .imgContainer {
        margin-left: 0;
    }
}

如果你玩弄这些尺寸，你会看到跳转到下一行的位置正好是 765px。766px 宽，看起来不错。作为一般规则，在处理 % 宽度时，您希望远离像素边距和填充。在调整屏幕大小时，您总会遇到问题。

于 2015-03-27T13:58:47.667 回答