如何阻止img溢出？

我的问题是我有一张我想用作网站徽标的图片。它所在的标题和div大小正确（我通过在Chrome浏览器上进行检查），但img正在满溢。我如何缩小它？（我将使用代码中的占位符图片）下面是代码：如何阻止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，我很困惑，为什么最大高度不工作。

* { 
    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%; 
}

我知道有些东西是不必要的，但它的，因为我已经尝试过这么多的修复它，我不知道是什么在起作用。感谢任何有用的回复。

来源

2016-08-04 Fzzz

“我意识到有些东西是不必要的，但是因为我已经尝试了很多东西来修复它，所以我不知道什么是有效的。” 定期保存你的工作，或者使用教程，这样你就可以很容易地从错误的版本回到更可靠的版本。 – technico

设置一个背景图像，它更容易，你可以指定：'background-size：cover;' –

确保清除你的元素！你有3个或4个'float'元素，它们都在不同的嵌套级别，但不是一个'clear'。 – Santi

为了防止内容溢出，您可以简单地使用相应的css属性：overflow: hidden。如果你这样做，那么溢出的内容就会被切断。在你的例子中，这不是正确的方法。您可以使用height而不是使用max-height。通过这样做，您将为您的元素分配一个绝对值。由于您的.imagecontainer只有max-height属性，请尝试将其替换为height，如here所示。

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

来源

2016-08-04 20:18:23 Aer0

这似乎起初工作，但一旦我添加一个边缘到img它再次溢出。 – Fzzz

改为使用'padding'。 – Aer0

如何阻止img溢出？

回答

相关问题