如何阻止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溢出？

回答

相關問題