CODEWITHSUNDEEP
htmlcssimage
public9nf
public9nf

Reputation: 1399

Image height should be height of parent element

My logo in the header section should always be the same height as the parent height.

HTML

<header>
   <div id="logo">
      <a href="/">
         <img src="img/logo.png" alt="Logo" />
      </a>
   </div>
</header>

CSS

*, *:before, *:after {
   box-sizing: border-box;
}

header {
  background-color: rgb(255,255,255);
  height: 50px;
  padding: 10px;
}

header #logo img {
  height: auto;   
  max-height: 100%;
  max-width: 100%;
}

Upvotes: 0

Views: 84

Answers (2)

RobinB
RobinB

Reputation: 33

@zer00ne's answer is definitely the way I would go with it, gives you much more control.

On a side note; you've got your header set to a fixed 50px height. You can just hard code in the sizes and positioning for a quick fix.

<head>

<style type="text/css">

header {
  background-color: rgb(255,255,255);
  height: 50px;
  padding: 10px;
}

header #logo img {
  height: 70px;
  margin-top: -10px; /*these can be removed and the height set to 50, but it will contain it within the padding*/
  margin-left: -10px;
}

</style>
</head>

<header>
   <div id="logo">
      <a href="http://placekitten.com/500/200">
         <img src="http://placekitten.com/500/200" alt="Logo" />
      </a>
   </div>
</header>

The original image was 500x200 (http://www.placekitten.com <3)

Upvotes: 2

zer00ne
zer00ne

Reputation: 43880

You could change the <img> to a <div> then use background-image and background-size: contain. Note this is a 256 x 256px image, but background-size: contain will cram the image within the <div>'s dimensions without cropping or distortion. Also since the logo is now a <div> (block-level element) and not an <img> (inline-level element), a height:100% will work the way you expect it to work.

references below

Snippet

#logo {
  height: 100%;
  width: 100%;
}
.img {
  background: url(https://www.w3.org/html/logo/downloads/HTML5_Badge_256.png) no-repeat;
  background-size: contain;
  height: 100%;
}


*,
*:before,
*:after {
  box-sizing: border-box;
}
header {
  background-color: rgb(255, 255, 255);
  height: 50px;
  padding: 10px;
}
#logo {
  height: 100%;
  width: 100%;
}
.img {
  background-image: url(https://www.w3.org/html/logo/downloads/HTML5_Badge_256.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
}
<header>
  <div id="logo">
    <a href="/">
      <div class="img"></div>
    </a>
  </div>
</header>

References:

Upvotes: 2

Related Questions