CSS - 溢出：隐藏不在img上工作

Question

我有一个svg img我从thenounproject.com获得（不要担心，我在我的网站上有一个地方，我赞美图像的创建者）我在div里面。我已经将div的CSS设置为overflow: hidden;但是img是从底部伸出的，改变包含div的高度在svg img包含它的div之上。

这是到目前为止最终结果的照片（蓝色叠加层是用萤火虫观察的<img>对象，所以你可以看到它是如何突出超出包含它的白色div）

我的代码是：

HTML

<div class="dropdown">
  <div class="box edit"><img src="../media/gear.svg"/></div>
</div>

CSS

.dropdown .box{
  width: 32px;
  height: 32px;
  padding: 5px 0px;
  margin: 0px 4px;
  display: inline-block;
  background-color: white;
  overflow: hidden;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.box.edit{
  float: right;
  padding: 0px;
}

我试图让它变成照片中的“蓝色”叠加层，代表svg img，不会超出白色box

更新

谢谢大家的回答。我虽然我会更新这个以缩小我的问题，因为我得到了你的反馈。我已尝试删除float: right;和其他想法（删除border: 0px solid transparent;），但虽然有帮助，但却无法解决问题。

我目前已将transform: rotate(90deg);应用于.box.edit，因此至少溢出与.dropdown栏的其余部分内联。

我已尝试max-height: 100%和width: 100%; height: auto;等，但这并不能解决我的问题。我不需要盒子里的整个svg，只需要你在上面的照片中看到的（齿轮）。下面的部分有来自thenounproject.com的版权位（参见我上面的声明，我仍然遵循他们使用照片的规则）。

我不知道是否需要编辑svg文件或者是什么，但我试图使用overflow: hidden;来切断结束位（因此它不会影响我的间距）。

感谢您的帮助。

Answer 1

尝试删除border

.dropdown .box{
  width: 32px;
  height: 32px;
  padding: 5px 0px;
  margin: 0px 4px;
  display: inline-block;
  background-color: white;
  overflow: hidden;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  /*border: 1px solid transparent;*/
  border-radius: 2px;
  cursor: pointer;
}

Answer 2

从.box移除浮动并改为使用display: inline-block

Answer 3

嗨，他正在工作，现在您可以像这样定义img css width和height 100%

.dropdown .box > img {
    vertical-align: top;
    width: 100%;
    height: 100%;
}

＆＃13;

＆＃13;

.dropdown .box{
  width: 32px;
  height: 32px;
  padding: 5px 0px;
  margin: 0px 4px;
  display: inline-block;
  background-color: white;
  overflow: hidden;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.box.edit{
  float: right;
  padding: 0px;
}

.dropdown .box > img {
vertical-align: top;
width: 100%;
height: 100%;
}

＆＃13;

<div class="dropdown">
  <div class="box edit"><img src="http://i.stack.imgur.com/8wc74.png"/></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

所以，除非我读错了，否则高度和宽度的归因会起作用吗？

代码就像这样，然后根据你的需要调整高度和宽度。

<div class="dropdown">
  <div class="box edit"><img src="../media/gear.svg"/ height="42" width="42"></div>
</div>

Answer 5

截至目前，您的图像高度超过其容器的高度，因为它显示了从容器中移出的叠加层。将 max-height：100％; 应用于图像会使您的图像保留在其父容器中，因此请尝试一下。

Answer 6

我终于找到了问题：

经过进一步研究，我发现<svg>有一个名为“viewBox”的属性，用于控制<svg>的显示量。我使用的<svg>的viewBox设置为“0 0 100 125”，这基本上意味着<svg>的宽度为100，高度为125。找到这个，并将高度降低到100后，<svg>变成了一个正确的方格，并没有比它包含div更突出。

感谢大家的回答，其中很多都很好，很有帮助。