Question

我正在尝试创建一行小部件（无关紧要），每个小部件都在固定宽度的列中。这些小部件中的第一个是可折叠图像，该图像由按钮控制。该按钮将与图片位于同一列，并且应位于图片下方。

除非我使用height:100%;，否则我似乎无法使图像适合父元素的高度，在这种情况下，它将按钮推出。我该如何解决这个问题？

注意：在本示例中，我大量使用flexbox，但是您可以删除它，没有理由。当前代码不是固定宽度，但应该是固定宽度。

function hideShow() {
  document.getElementById('hideme').classList.toggle('hide');
}

.hide {
  display: none;
}

main {
  height: 100px;
  background-color:rgba(0,255,0,50);
  display:flex;
}

main > div:first-child {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#container > div:first-child > img {
  height:100%;
  /* Some code I can't figure out */
}

<main>
  <div id="container">
    <div>
      <img id="hideme" src="https://placehold.it/200x200">
    </div>
    <button onclick="hideShow()">Show Image</button>
  </div>
  <button>Oh, and some</button>
  <input value="other stuff">
 </main>

图片忽略了容器高度

0 个答案: