asked on

Display, center, and scale an image in a div

I need a little assistance solving the problem with centering and scaling an image within a div. I would like to keep the image's ratio and position the image in the middle of the div.

HTML

<div class="imgs1"><a href="javascript:image_click(1)"><img src= width="100" height="100" name="pimage1" border=0 class="resize"></a>

CSS

.imgs1{

      float: left;
      position:relative
      padding: 10px;
      max-width:100px;
max-height:100px;
      border: 1px solid #D1D1D1;
      vertical-align:middle;
}
.resize{

      margin-left:auto;
      margin-right:auto;
      width: 100px;
height: 100px;
      vertical-align:middle;
}

Gary

Missing a ; here
position:relative
Since the div has no height/width and is floated it will only take up as much space as the image (plus padding)

eager_to_learn

ASKER

The image sits against the left border. I see what you are saying about the padding but why doesn't the image center. The aspect ratio is correct just not in the middle of the div.

Gary

This is your code
http://jsfiddle.net/4WUNy/
So I'm not sure what you are talking about

eager_to_learn

ASKER

I have been trying so many different configurations that I have completely lost it...It is the scaling that is incorrect. The image is centered but the aspect ratio is distorted.

eager_to_learn

ASKER

This is my CSS code after taking the padding out:

.imgs1{
      margin-left:auto;
      margin-right:auto;
      float: left;
      position:relative;
      max-width:100px;
max-height:100px;
      border: 1px solid #D1D1D1;
       width: auto;
height: auto;

}
.resize{

      margin-left:auto;
      margin-right:auto;
      width: 100px;
height: 100px;
      vertical-align:middle;
}

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial