maximedupre maximedupre - 3 months ago 6
CSS Question

Resizing an image in % does not change the width of the parent container

With this HTML:

<div class="navbar-header">
<a href="">
<img id="logo" src="logo.png" alt="Camaupoint">
</a>
</div>


Let's say
#logo
's width is 100px. If I resize the image in percentage:

#logo {
width: 10%;
}


#logo
's width has changed to
10px
, but
#navbar-header
is still at
100px
. If I set the image's width in pixels I don't have this problem.

How can I resize an image's width and also have it's parent container resized?

Answer

When you set the size of your logo in px and don't specify a size of it's parent the parent will get the size of it's content. But when you set logo's size in % this percent should be calculated of some value and since it's parent don't have a specified width it's trying to rely on something, in this case there's only logo's native image width to rely on. In this way the parent will get a size of original logo's width and then logo will get calculated percent of it's parent size.

I can see 3 different ways to solve your problem:

  1. Put your logo without a div and set display:block for it
  2. May be in your particular case you can use vw units instead of px or %
  3. Use some javascript solution