Home/ Questions/Q 903377
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T15:52:05+00:00

A simple (one might think!) question to all CSS gurus: I would like to

  • 0

A simple (one might think!) question to all CSS gurus: I would like to shrink a DIV snugly around an IMG. The IMG is 600 x 800 and I needed it much smaller. So I go {height: 100%; width: auto;} and constrain the height via a wrapper DIV. However, to maintain the (unknown to me) AR, I cannot fix the width on the DIV. I tried to set the wrapping DIV to “display: inline-block” or “float: left” or “position: absolute” or … – no matter: most browsers will stretch that DIV 800px wide – the original width of the full-size IMG – so it looks sthg like this:

[[IMG]………………………..]

Bizarrely, I can add some text to the DIV (just to test), and that text will actually appear right next to the scaled IMG:

[[IMG]Hello world………………]

Does anyone here know why the original size of the IMG matters (for dimensioning the width, it does not affect the height)? And what I might be able to do to shrink the DIV?

Thanks for looking.

EDIT:
To test Pär Wieslander’s idea, I wrote a little test bed that should help clarify what I am on about:

<style type="text/css">  
  html, body {  
     height: 100%;  
  }  
  #dialog {  
     background: green;  
     height: 50%;  
     position: relative;  
  }  
  #frame {  
     border: 2px solid black;  
     display: inline-block;  
     height: 100%;  
     position: absolute;  
  }  
  #img {  
     height: 100%;  
     width: auto;  
  }  
</style>  

<body>  
  <div id="dialog">  
     <div id="frame">  
        <img id='img' src='...' />  
     </div>  
  </div>  
</body>

Just pick any large IMG of your choice. You should find an inexplicably wide frame around and image that has squeezed – height-wise – onto the green carpet.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you specify the image’s width or height as a percentage, that percentage is calculated in proportion to the size of the parent block. So specifying width: 50% on the image doesn’t mean 50% of the original image width — it means 50% of the width of the parent block. The same goes for the height. Thus, there will always be extra space around the image as long as you specify the width or height as a percentage.

    The solution is simple — specify the dimensions in pixels, ems or any other unit other than a percentage:

    HTML

    <div class="wrapper">
  <img class="small" src="myimage.jpg">
</div>

    CSS

    img.small {
  width: 150px;    /* or whatever you like */
  display: block;  /* to avoid empty space below the image */
}

div.wrapper {
  display: inline-block;
  border: 1px solid #000;
}

    Edit: Based on your comments and updated post, I understand that what you really want to do is to set the width of the surrounding div and make the image fill up that div. Here’s an example that does that:

    HTML

    <div class="wrapper big">
  <img src="myimage.jpg">
</div>

<div class="wrapper small">
  <img src="myimage.jpg">
</div>

    CSS

    img {
  display: block;
  width: 100%;
}

.wrapper {
  margin-top: 1em;
  border: 1px solid #000;
}

.big {
  width: 600px;
}

.small {
  width: 300px;
}
    • 0