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;
}
eager_to_learnAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
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)
0
eager_to_learnAuthor Commented:
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.
0
GaryCommented:
This is your code
http://jsfiddle.net/4WUNy/
So I'm not sure what you are talking about
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

eager_to_learnAuthor Commented:
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.
0
eager_to_learnAuthor Commented:
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;
}
0
GaryCommented:
To keep the aspect you can only have an height or a width - not both (on the image itself)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.