将 div 宽度设置为 Img 内容

Posted 2023-03-06

【中文标题】将 div 宽度设置为 Img 内容

【英文标题】：Set Div Width To Img Content

【发布时间】：2020-01-01 00:39:00

【问题描述】：

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

问题

当向下滚动时，我有一堆垂直的图标保留在页面的左侧。一切似乎都可以正常工作，只是包含的 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"  />
  </div>
  <div>
    <img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png"  />
  </div>
</div>

我尝试过的事情

Display: inline-block / Display: table 是最常见的解决方案。将它们放在“navStack”上什么都不做。在 'navStack div' 上放置 inline-block 让我明白：

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

放置宽度没有任何作用。

'navStack div' 上的 Inline-Flex 与上述相同；在 'navStack' 上让我知道：

width: min-content - 无论是 '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"  />
  </div>
  <div>
    <img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png"  />
  </div>
</div>

结果如下：

进展

感谢以下人员的善意帮助，取得了进展。使用最新的 CSS（上面的最后一个 CSS），'navStack div' 元素不再扩展，但是，'navStack' 是：

【问题讨论】：

感谢您的评论。似乎没有工作：/。将更新帖子。

我在第一条评论中写错了，试试这个：.navStack divmax-height: 10%; max-width:10% 和.navIcons max-width: 100% max-height: unset

我对你的问题做了一点修改，添加了一个边框，让我们看到真正的 div 大小，这对我来说似乎没问题

任何时候你限制父级大小，子级将跟随父级的最大大小（特殊情况除外），但如果你将.navStack 大小限制为 10%，则可以添加 100%给它的孩子，因为它不会溢出父母 10% 的大小。

很高兴知道。做到了！谢谢@CalvinNunes

【参考方案1】：

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

.navStack 
    max-width: 10%;


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

您的代码重置保持不变。

【参考方案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;

【参考方案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"  />
                </div>
     <div>
                   <img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png"  />
                </div>
</div>

【讨论】：

谢谢亚沙尔。这几乎奏效了，除了它把 navStack 留在了它不打算阻止的内容之上。查看提交的答案。

【参考方案4】：

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

具体来说，我已经申请了“navStack”'max-Width: 10%'，“navStack div”max-height: 40%; and max-width: 40%;，以及“navIcons”width: auto; max-width: 100%; max-height: unset;

最终的标记如下所示：

.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"  />
  </div>
  <div>
    <img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png"  />
  </div>
</div>