CODEWITHSUNDEEP
csshtmlimage
Ollie2893
Ollie2893

Reputation: 427

How to shrink a DIV around a scaled IMG?

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.

Upvotes: 3

Views: 4916

Answers (3)

P&#228;r Wieslander
P&#228;r Wieslander

Reputation: 28934

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;
}

Upvotes: 4

Ollie2893
Ollie2893

Reputation: 427

I think Pär's approach is right: don't do { height: fix; width: auto; } but do instead { height: auto; width: fix; } Works better.

Upvotes: 0

Matt Mitchell
Matt Mitchell

Reputation: 41823

So I go height="50%", say, and width="auto" (to maintain AR).

Why not just go width="50%" too as this would resolve it.

Upvotes: 0

Related Questions