Question

我知道这个问题经常被问到，但是似乎没有解决方案适用于我的情况。我想这很简单，我没看到。希望有人可以指出正确的方向。

问题

我有一个垂直的图标堆栈，当向下滚动时，这些图标保留在页面左侧。一切似乎都可以正常工作，只是包含的div不会缩小到其内容，这会阻止用户与界面的一部分进行交互：

请注意，Div会扩展到超出其包含的图像的范围。这会干扰选择单选按钮。这是标记：

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

.navStack div {
  width: auto;
}

.navIcons {
  transition: all 0.3s ease;
  width: auto;
  max-Width: 10%;
  max-Height: 10%;
  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;
}

<div class='navStack'>
  <div>
    <img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
  </div>
  <div>
    <img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png" alt="" />
  </div>
</div>

我尝试过的事情

Display: inline-block / Display: table是最常见的解决方案。将它们放在“ navStack”上没有任何作用。将内联块放置在“ navStack div”上可获得以下信息：

显示：内联-在'navStack'上没有响应；在“ navStack div”上

放置宽度没有任何作用。
'navStack div'上的Inline-Flex与上面的相同；在'navStack'中得到我这个：
宽度：最小内容-无论是'navStack'还是'navStack div'，应用此图片时图像都会完全消失。
每个评论中，我在'navIcons'中使用max-width / height进行播放，并将其添加到'navStack div'中，如下所示：

.navStack div {
  max-height: 10%;
  max-width: 10%;
  border: 1px solid;
}

.navIcons {
  transition: all 0.3s ease;
  width: auto;
  max-width: 100%;
  max-height: unset;
  /* max-Width: 10%;
    max-Height: 10%; */
  margin: 4px 0;
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
  cursor: pointer;
  display: inline-block;
}

<div class='navStack'>
  <div>
    <img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
  </div>
  <div>
    <img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png" alt="" />
  </div>
</div>

结果如下：

进度

在下面的人的帮助下取得了进展。使用最新的CSS（上面的最后一个CSS），“ navStack div”元素不再扩展，但是，“ navStack”为：

Answer 1

解决方案是将大小调整应用于父div，其子级和图像。

具体来说，我已将“ 'max-Width: 10%'”应用到“ navStack”，“ max-height: 40%; and max-width: 40%;”已应用到“ navStack div”以及width: auto; max-width: 100%; max-height: unset;到“ navIcons”

最终标记如下：

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

.navStack div {
  max-height: 40%;
  max-width: 40%;
}

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

<div class='navStack'>
  <div>
    <img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
  </div>
  <div>
    <img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png" alt="" />
  </div>
</div>

Answer 2

我看到您已经回答了您自己的问题，但是我还是会把我的问题丢给我。我相信您会看到事情比需要的复杂。

只需在导航堆栈上指定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;
}

Answer 3

使用此代码：

<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>

HTMl：

<div class='navStack'>
    <div>
                    <img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
                </div>
     <div>
                   <img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
                </div>
</div>

Answer 4

在按父div的百分比调整图像大小时，div保持相同大小。因此，如果您需要缩小图像的大小，请按以下步骤更改代码：

.navStack {
    max-width: 10%;
}

.navIcons {
    width: 100%;
    /* max-width: 10%; */
    /* max-height: 10%; */
}

您的代码重置保持不变。

将Div宽度设置为图片内容

4 个答案: