maximedupre maximedupre - 1 month ago 5x
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">

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

#logo {
width: 10%;

's width has changed to
, but
is still at
. 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?


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