0

OK, if I have a div:

<div id="imgholder">
    <img id="myimg" src = "foo.png">
</div>

I need the image to be no larger than 700px by 700px.

So I did this:

#myimg{
    max-height: 700px;
    max-width: 700px;
}

But now, I need the div to wrap tightly around the image. How can I do this? It seems like I would want a max height and width on there. The div defaults to being 100% of the body's height and width. So if I put a max height and width on it, it ALWAYS comes out to that height and width, even if the picture inside is smaller than that. How can I fix this?

EDIT: Realized I left out why it is defaulting to the height and width of the body: 

#imgholder{
    overflow: hidden;
    z-index:1000;
    background-color: #F0D2DB;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    padding: 10px;
    border-radius: 10px;
    float: left;
}

I'm having it pop over the pages content, so I'm using the top,bottom,left, and right attributes to help center it.

user3475234
  • 1,503
  • 3
  • 22
  • 40
  • the div never defaults to being 100% of the body's height. It does default (float: none) to 100% width though. If you set it to float: left it will take on the size of it's contents. – Damon Smith Jan 23 '15 at 03:20
  • @DamonSmith Sorry, I edited the question - I need the div centered on the page, so I was using distance from top, left, right, and bottom, along with auto margins to center it, after reading about it from another question. – user3475234 Jan 23 '15 at 03:27
  • vertical alignment is difficult. It's the great, ridiculous, farcical shortcoming of CSS 2. CSS 3 has the concept of flex boxes which are horrendously complex but do the job. For Horizontal centering just make it position relative, remove the float and positioning and set the margin to margin: 0 auto; – Damon Smith Jan 23 '15 at 03:34
  • I think what you are looking for is here . http://stackoverflow.com/questions/11078913/how-to-set-max-width-of-an-image-in-css – Ji_in_coding Jan 23 '15 at 03:50

0 Answers0