CODEWITHSUNDEEP
cssimagehtmlcss-float
dragonridingsorceress
dragonridingsorceress

Reputation: 765

How do I make a floated img have the same height as its parent?

I have a footer div which contains some copyright text, and a small logo. I want to set the logo height to be the same height as the div which contains it.

The obvious solution would be height: 100%, but this just seems to make the picture appear at its normal height.

Relevant html:

<footer>
  <img src="images/circle_logo.png" alt="GriffMUN 2014" title="GriffMUN 2014">
  <p>Details here</p><p>More details here.</p>
</footer>

Relevant css:

footer {
  color: #ffffff;
  padding: 10px 10px 10px 10px;
  text-align: right;
  margin: 0 auto;
  background-color: #000000;
  font-size: small;
  float: center;
}

footer img {
  float:right;
  height:100%;
}

Upvotes: 0

Views: 136

Answers (2)

Sobin Augustine
Sobin Augustine

Reputation: 3765

add a div in absolute position inside to accommodate the img

<footer>
     <p>Details here</p><p>More details here.</p>
     <div class="new_class"><img src="images/circle_logo.png" alt="GriffMUN 2014" title="GriffMUN 2014"></div>
    </footer>

css

footer {
  color: #ffffff;
  padding: 10px 10px 10px 10px;
  text-align: right;
  margin: 0 auto;
  background-color: #000000;
  font-size: small;
  float: center;
  position:relative;
}

footer img {
  float:right;
  height:100%;
}
.new_class {
    position:absolute;
    right:50px;
    top:0;
    height:100%;
    }

adjust the div location to your need to see the <p> tags

Upvotes: 1

everydayghost
everydayghost

Reputation: 691

If the footer is a set height, height: inherit; should do the trick. If the footer's height is dynamic (ie a percentage rather than a set number) you can use jQuery to match its height to the footer's height, like so:

$('footer img').height( $('footer').height() + 'px');

This is assuming of course that your img element is contained in a footer element. Hope that helps!

Upvotes: 0

Related Questions