Question

I m 提供全屏幕图像观察器,配备导航 but子、侧栏和底线。 I m试图将图像与objectfit:down 的集装箱四相匹配——它从事着工作,但不符合其高温——它使“th子”部分倒塌和(或)使该网页上下发,而不是像我所期望的那样重新塑造形象。而且,它展示了大量不必要的空白空间。

JSfiddle here

body {
  padding: 0;
  background-color: black;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.top {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.image_viewer {
  flex: 1;
  width: 80%;
  display: flex;
  flex-direction: column;
}

.image_container {
  flex: 1;
}

.image_container img {
  height: 100%;
  width: 100%;
  object-fit: scale-down;
}

.controls {
  background-color: red;
  color: white;
  text-align: center;
}

.sidebar {
  width: 20%;
  background-color: blue;
  color: white;
}

.bottom {
  height: 150px;
  background-color: green;
  text-align: center;
}

<html>

<body>

  <div class="container">

    <div class="top">

      <div class="image_viewer">

        <div class="image_container">

          <img src="https://picsum.photos/400/800">

        </div>

        <div class="controls">

          controls go here

        </div>

      </div>

      <div class="sidebar">

        sidebar goes here

      </div>

    </div>

    <div class="bottom">

      thumbnails go here

    </div>

  </div>

</body>

</html>

在demo I ve 建立了bottom div to hala:150px,但在实践中,我希望这一四点能够根据其内容达到最低高度,使图像达到最强的空间。

我做了什么错误?

Answer 1

在图像装上之前,所有物品都被打上了折扣......但当装上时,当布满时,就会被打上。因此,这无疑是打破布局的形象本身。

因此,你需要将“滚动”的图像(out>,将其与的链接:及其母体为position: relative。这保证了图像不会影响布局。

body { padding: 0; background-color: black; } .container { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; } .top { flex: 1; display: flex; flex-direction: row; } .image_viewer { flex: 1; width: 80%; display: flex; flex-direction: column; } .image_container { flex: 1; position: relative; } .image_container img { position: absolute; height: 100%; width: 100%; object-fit: scale-down; } .controls { background-color: red; color: white; text-align: center; } .sidebar { width: 20%; background-color: blue; color: white; } .bottom { height: 100px; background-color: green; text-align: center; }

<div class="container"> <div class="top"> <div class="image_viewer"> <div class="image_container"> <img src="https://picsum.photos/400/800"> </div> <div class="controls"> controls go here </div> </div> <div class="sidebar"> sidebar goes here </div> </div> <div class="bottom"> thumbnails go here </div> </div>

在管理这一幻灯之后,使用full page链接测试反应能力。

PS。令人感兴趣的是,地貌或地貌并不打破你的布局,而是它唯一的漏洞。我不理解造成这种情况的原因,但如果其他人能够解释,我很想知道。

友情链接