如何阻止图像溢出？答案

【问题标题】：How to stop img from overflowing?如何阻止图像溢出？
【发布时间】：2016-08-05 07:54:37
【问题描述】：

我的问题是我想将一张图片用作网站的徽标。它所在的标头和 div 大小正确（我通过在 chrome 上检查它进行了检查），但是 img 溢出了。我如何缩小它？（我将使用占位符图像作为代码）代码如下：

<body>
  <header class="mainheader">
     <a href="main.html" class="navelement">
        <div class="imgcontainer">
          <img src="https://lh3.googleusercontent.com/-Ajc8gSO3SRw/VtZj0tsyXhI/AAAAAAAAAHs/tlsdyufJ1J4/w868-h560/2.png"/>
        </div>
    </a>
  </header>
 </body>

这是随附的 css，我很困惑为什么 max-height 不起作用。

* {
  box-sizing: border-box;
}
 body{
   margin: 0;
}
header{
  height:10vh;
  width: 100%;
  float left:
  margin: 0;
  background-color:grey;
  font-family: 'Teko', sans-serif;
  display: inline-block;
}
header .navElement {
  vertical-align: middle;
  float:left;
  width: 17%;
}
.imgcontainer{
  float:left;
  max-height: 100%;
}
.imgcontainer img{
  float:left;
  max-height:100%;
}

我意识到有些事情是不必要的，但这是因为我已经尝试了很多来修复它，以至于我不知道什么是有效的。感谢您提供任何有用的回复。

【问题讨论】：

“我意识到有些事情是不必要的，但这是因为我已经尝试了很多来修复它，以至于我不知道什么是有效的。”定期保存您的工作，或使用教程，这样您就可以轻松地从错误的版本返回到更可靠的版本。
设置背景图片，比较简单，可以指定：background-size:cover;为它
确保清除你的元素！你有 3 或 4 个 float 元素，它们都在不同的嵌套级别，但没有一个 clear。

标签： html css

【解决方案1】：

为了防止内容溢出，您可以简单地使用相应的css-property：overflow: hidden。如果这样做，溢出的内容将被截断。在您的示例中，这不是正确的方法。

您可以使用height，而不是使用max-height。通过这样做，您将为元素分配一个绝对值。由于您的.imagecontainer 只有一个max-height 属性，请尝试将其替换为height，如here 所示。

.imgcontainer {
  float: left;
  height: 100%;
}

【讨论】：

这似乎一开始可以工作，但是一旦我向 img 添加边距，它就会再次溢出。
改用padding。