jquery - 如何在调整窗口大小的情况下显示完整内容？

Question

我希望即使将浏览器窗口调整为任意大小，我的文本和图像也能完整显示。到目前为止，它在 I resize the window horizontally 时有效但是当我垂直调整它的大小时， it just clips over the content.

我也不想要任何侧滚动条，因此调整了内容的大小。

body {
  background-color: #CFFFE7;
  overflow: hidden;
}

#master {
  display: table;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 30px 70px 60px 70px;
  height: 100%;

}

p {
  font-weight: bold;
  font-size: 20px;
  font-size: 2vw;
  font-family: sans-serif;
}

#diagrams {
  background-color: lightblue;
  text-align: center;
}

.logo-image {
  vertical-align: middle;
  display: table-cell;
}

.logo-image img {
  max-width: 90%;
  max-height: 90%;
}

<div id="master" class="container">
  <p>This is a very long sentence. This is a very long sentence. This is a very long sentence.</p>
  <p>
    This is a very long sentence.
    <br/>
    This is a very long sentence.
  </p>
  <div id="diagrams" class="container">
    <div class="logo-image">
      <img id="ssc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img id="msc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img id="asc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image "/>
    </div>
  </div>
</div>

Answer 1

您遇到此问题是因为当您垂直调整窗口大小时，它不会影响 .logo-image div 的高度。

您可以将 vh 属性与您的 .logo-image div 一起使用，如下所示:

.logo-image {
    vertical-align: middle;
    display: table-cell;
    height : 90vh;
}

vh 基本上表示视口(viewport)的百分比，因此如果我们将 90vh 作为高度分配给某个 div，则意味着 90% 的可用视口(viewport)将作为高度分配给它。