Html 将Div Width设置为Img Content

我知道经常有人问我这个问题，但似乎没有任何解决办法适用于我的情况。我想这是一件我没有看到的简单的事情。希望有人能给我指出正确的方向

问题

我有一个垂直的图标堆栈，当一个人向下滚动时，这些图标仍然保留在页面的左侧。一切似乎都正常，但包含的div不会收缩到其内容，这会阻止用户与部分界面交互：

请注意，Div的扩展远远超出了它所包含的图像。这会干扰单选按钮的选择。以下是标记：

.navStack{
显示：表格；
位置：固定；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
左边缘：-5%；
}
.navStack分区{
宽度：自动；
}
.海军{
过渡：所有0.3秒缓解；
宽度：自动；
最大宽度：10%；
最大高度：10%；
保证金：4px0；
-webkit过滤器：亮度（100%）；
滤光片：亮度（100%）；
光标：指针；
显示：内联块；
}
.海军：悬停{
转换：比例（1.5）；
-webkit过滤器：亮度（70%）；
滤光片：亮度（70%）；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
-ms转换：所有1秒轻松；
过渡：所有的1容易；
}

使用以下代码：

<style>
    .navStack {
        display: table;
        position: fixed;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-left: 0;
    }

    .navStack div {
        width: 40px;
    }

    .navIcons {
        transition: all 0.3s ease;
        width:100%;
        margin: 4px 0;
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
        cursor: pointer;
        display: inline-block;
    }

        .navIcons:hover {
            transform: scale(1.5);
            -webkit-filter: brightness(70%);
            filter: brightness(70%);
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
        }
</style>

.导航堆栈{
显示：表格；
位置：固定；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
左边距：0；
}
.navStack分区{
宽度：40px；
}
.海军{
过渡：所有0.3秒缓解；
宽度：100%；
保证金：4px0；
-webkit过滤器：亮度（100%）；
滤光片：亮度（100%）；
光标：指针；
显示：内联块；
}
.海军：悬停{
转换：比例（1.5）；
-webkit过滤器：亮度（70%）；
滤光片：亮度（70%）；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
-ms转换：所有1秒轻松；
过渡：所有的1容易；
}

HTMl:

---

解决方案是对父div、子div和图像应用大小调整

具体地说，我已经应用于“导航堆栈”a

“最大宽度：10%”

，应用于“导航堆栈div”a

最大高度：40%；最大宽度：40%，并指向“navIcons”
宽度：自动；最大宽度：100%；最大高度：未设置

最终标记如下所示：


.navStack{
位置：固定；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
左边缘：-5%；
最大宽度：10%；
}
.navStack分区{
最大高度：40%；
最大宽度：40%；
}
.海军{
过渡：所有0.3秒缓解；
宽度：自动；
最大宽度：100%；
最大高度：未设置；
保证金：4px0；
-webkit过滤器：亮度（100%）；
滤光片：亮度（100%）；
光标：指针；
显示：内联块；
}
我知道你已经回答了你自己的问题，但我还是要把我的问题说出来。我相信你看到的事情比实际情况要复杂得多

只需在navstack上指定
max width
，当您将其余元素的宽度设置为100%时，它们将跟随，并给出以下标记：

.navStack {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  max-width: 10%;
}

.navStack div {
  width: 100%;
}

.navIcons {
  transition: all 0.3s ease;
  width: 100%;
  margin: 4px 0;
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
  cursor: pointer;
  display: inline-block;
}

当按父div的百分比调整图像大小时，div的大小保持不变。因此，如果需要缩小图像的大小，请按如下所示更改代码：

.navStack{
最大宽度：10%；
}
.海军{
宽度：100%；
/*最大宽度：10%*/
/*最大高度：10%*/
}

代码的重置保持不变。
谢谢您的评论。似乎不起作用：/。将更新帖子。我在第一条评论中犯了一个错误，请尝试以下操作：
.navStack div{max height:10%；max width:10%}
和
.navIcons{max width:100%max height:unset}
我对您的问题进行了一些编辑，添加了一个边框，让我们可以看到真实的div大小，同时您可以限制父级大小，子项将遵循父项的最大大小（特殊情况除外），但如果将
.navStack
大小限制为10%，则可以向其子项添加100%，因为它不会溢出父项的10%大小。很高兴知道。成功了！谢谢@CalvinNunesThanks Yashar。这几乎起到了作用，只是它将navStack放在了它不想阻止的内容之上。请参阅提交的答案。
.navStack {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  max-width: 10%;
}

.navStack div {
  width: 100%;
}

.navIcons {
  transition: all 0.3s ease;
  width: 100%;
  margin: 4px 0;
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
  cursor: pointer;
  display: inline-block;
}