CODEWITHSUNDEEP
htmlcss
Fzzz
Fzzz

Reputation: 11

How to stop img from overflowing?

My problem is that I have an image that I would like to use as the logo for the website. The header and div that it is in are properly sized (i checked by inspecting it on chrome) , but the img is overflowing. How do i scale it down? (I will use a placeholder image for the code) Here is the code:

<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>

Here is the accompanying css, I'm confused why the max-height isn't working.

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

I realize some things are unnecessary but its because i've tried so much to fix it that i don't know what works. Thanks for any helpful replies.

Upvotes: 1

Views: 2246

Answers (1)

Aer0
Aer0

Reputation: 3907

To prevent overflowing of content, you can simply use the corresponding css-property: overflow: hidden. If you do so, the content which is overflowing, will simply get cut off. In your example, this wouldn't be the right approach.

Instead of using max-height you may use height. By doing so, you'll assign an absolute value for your elements. Since your .imagecontainer only has a max-height property, try replacing it with height, as shown here.

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

Upvotes: 3

Related Questions