Question

我有一个div元素，在其上面覆盖了一个垂直边栏，该边栏由垂直堆叠的svg图标组成。我需要侧边栏始终与父边栏保持相同的高度，并在更改窗口大小时缩小/增大图标，以填补空白。

当窗口变大时，我设法使它们的大小保持相同，但是侧边栏拒绝从某个点缩小。

我认为图像不会缩小，因为它们的父div（侧边栏）不会缩小到超过7个图标的总和之和。它也没有真正放大图像，flexbox实际上只是随着高度的增加而增加了更多的空白空间，这是可以的。实际上，理想的情况是它们最初不大于x，并且按比例放大会增加空间，按比例缩小会先尽可能缩小空白空间，然后缩小图标。

我尝试了2个Google搜索页面，其中包括最小宽度，对象填充等内容。而且我似乎无法解决它-如果将父级压缩，则侧边栏会无限期地从父级溢出，从而使其高度小于所有7个图标的总和。

.sidebar {
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

.sidebar-item {
  flex: 1 1 auto;
  background-color: black;
  position: relative;
  z-index: 1;
}

.sidebar-item img {
  width: 100%;
  height: auto;
}

<div id="map">
  <div id="sidebar" class="sidebar">
    <div class="sidebar-item">
      <img src="https://via.placeholder.com/150?text=icon1" alt="icon1">
    </div>
    <div class="sidebar-item">
      <img src="https://via.placeholder.com/150?text=icon2" alt="icon2">
    </div>
    <div class="sidebar-item">
      <img src="https://via.placeholder.com/150?text=icon3" alt="icon7">
    </div>
  </div>
</div>

Answer 1

通过在边栏项目中添加以下属性来解决：

display: flex;
min-width: 0;
min-height: 0;

动态调整图像大小

1 个答案: