Question

我遇到了一种我一直在研究的垂直滑块的问题。问题是，当我更改显示分辨率时，rigth的缩略图与左边的图片的高度不同。通过写作来解释有点困难，所以我制作了一个代码笔来帮助我更好地理解它。所以它是：

.container2 {
  background-color: grey;
}
.container1 {
  background-color: magenta;
  position: absolute;
  max-height: 609px;
  overflow: hidden;
}
.lSection {
  background-color: blue;
  position: relative;
  max-height: 609px;
}
.rSection {
  background-color: green;
  position: relative;
  max-height: 609px;
}
.lSection>* {
  min-width: 100%;
  /*   min-height: 609px; */
}
.rSection>ul {
  max-height: 609px;
}
.rSection>ul img {
  max-height: 150px;
}
li {
  padding-bottom: 2px;
  list-style: none;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="container2 row-fluid">
  <div class="container1 span10">
    <div class="lSection span9">
      <img class="contain" src="http://mw2.google.com/mw-panoramio/photos/medium/58122377.jpg">
    </div>
    <div class="rSection span3">
      <ul>
        <li>
          <a>
            <img src="http://cdn.olhares.pt/client/files/foto/big/330/3301699.jpg">
          </a>
        </li>
        <li>
          <a>
            <img src="http://cdn.olhares.pt/client/files/foto/big/330/3301699.jpg">
          </a>
        </li>
        <li>
          <a>
            <img src="http://cdn.olhares.pt/client/files/foto/big/330/3301699.jpg">
          </a>
        </li>
        <li>
          <a>
            <img src="http://cdn.olhares.pt/client/files/foto/big/330/3301699.jpg">
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

要进行测试，您只需调整浏览器窗口的大小即可。在更高的分辨率下它似乎很好，因为我已经定义了最大高度。当您将窗口调整为较低分辨率时，您将看到我的问题发生。

有人可以，请给我一个关于如何在同一时间和相同高度调整主图像和缩略图的提示？

感谢。

Answer 1

这是因为您使用的是bootstrap版本2.

如果您查看他们provide的示例，您可以看到这是预期的行为。调整其网站的大小，您会看到span1 - span11的容器跳到全宽。

相反，我建议您升级Bootstrap，或者为移动网站创建自己的实现。

布局表：

<table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Label</th>
                <th>Layout width</th>
                <th>Column width</th>
                <th>Gutter width</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Large display</td>
                <td>1200px and up</td>
                <td>70px</td>
                <td>30px</td>
              </tr>
              <tr>
                <td>Default</td>
                <td>980px and up</td>
                <td>60px</td>
                <td>20px</td>
              </tr>
              <tr>
                <td>Portrait tablets</td>
                <td>768px and above</td>
                <td>42px</td>
                <td>20px</td>
              </tr>
              <tr>
                <td>Phones to tablets</td>
                <td>767px and below</td>
                <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
              </tr>
              <tr>
                <td>Phones</td>
                <td>480px and below</td>
                <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
              </tr>
            </tbody>
          </table>

Answer 2

因此，我使用另一种方法，使用视口大小计算实现了这一点。所以在这种方法中，我为图像定义了一个2：3格式，根据这种格式计算它的高度，并在我想要的视口单元中计算（计算或多或少地跟随bootstrap2网格系统宽度计算。）

这是codepen：

https://codepen.io/fmalmeida/pen/WxxJvG

.imageFormatDiv {
  background-color: black;
  display: block;
  height: calc((2/3)*62.55vw);
  overflow: hidden;
  width: 62.55vw;
}

.imageFormatDiv2 {
  background-color: black;
  display: block;
  height: calc((2/3)*15.4vw);
  overflow: hidden;
  width: 15.4vw;
}

.imageFormatDiv img,
.imageFormatDiv2 img {
  min-height: 100%;
  min-width: 100%;
}

.rSection {
  margin-left: 15px;
}

.rSection ul {
  margin: 0px;
}

/* .rSection li {
  float: left;
  position: relative;
} */

.rSection li:nth-child(1),
.rSection li:nth-child(2),
.rSection li:nth-child(3) {
  padding-bottom: 3px;
  overflow: hidden;
}

/* @media screen and (max-width: 768px) {
  .imageFormatDiv {
    background-color: black;
    display: block;
    height: auto;
    overflow: hidden;
    width: auto;
  }
  .imageFormatDiv2 {
    background-color: black;
    display: block;
    height: auto;
    overflow: hidden;
    width: auto;
  }
} */

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container2 row-fluid">
  <div class="container1 span10" style="background-color:red">
    <div class="lSection span9" style="background-color:blue">
      <!--       <img class="contain" src="http://mw2.google.com/mw-panoramio/photos/medium/58122377.jpg"> -->
      <div class="imageFormatDiv">
        <img class="singleImage" src="https://placemaker.moredata.pt/documents/22267/23267/1-1-A.jpg">
      </div>
    </div>
    <div class="rSection span3 hidden-phone" style="background-color:orange">
      <ul>
        <li>
          <div class="imageFormatDiv2">
            <a><img src="https://placemaker.moredata.pt/documents/22267/23267/1-1-A.jpg"></a>
            <div class="pWrapper">
              <p>TESTE 123</p>
            </div>
          </div>
        </li>
        <li>
          <div class="imageFormatDiv2">
            <a><img src="https://placemaker.moredata.pt/documents/22267/23267/1-2-3.jpg"></a>
            <div class="pWrapper">
              <p>TESTE 123</p>
            </div>
          </div>
        </li>
        <li>
          <div class="imageFormatDiv2">
            <a><img src="https://placemaker.moredata.pt/documents/22267/23267/1-4-F.jpg"></a>
            <div class="pWrapper">
              <p>TESTE 123</p>
            </div>
          </div>
        </li>
        <li>
          <div class="imageFormatDiv2">
            <a><img src="https://placemaker.moredata.pt/documents/22267/23267/1-3-D.jpg"></a>
            <div class="pWrapper">
              <p>TESTE 123</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

CSS bootstrap：如何保持并排div保持内容高度等于调整大小？

2 个答案: