Jump to content

Using Max-width Property While Maintaining the Aspect Ratio


Vaibhav

Recommended Posts

Hi everyone, This is my first post here, so probably welcome me. :P Okay so on topic, I have a tech blog where we have multiple number of writers making posts. To make adding images easier, I used the max-width property and set it according to the content box width. The problem I'm facing is though, that the height doesn't change while the width does, thus the picture gets distorted and out of proportion which isn't pleasing AT ALL. I use this coding in my stylesheet:

img {padding: 10px 5px;max-width: 600px;max-height: 100%;}

I've also tried using

auto

and

inherit

instead of

100%

and just

height

instead of

max-height

but nothing helped. I'm using a wordpress blog by the way. Thanks in advance :)

Link to comment
Share on other sites

The results I'm getting from my tests in Firefox and Internet Explorer 9 is that the image maintains its aspect ratio when setting max-width and max-height. Which browser are you seeing this problem in?

Link to comment
Share on other sites

The results I'm getting from my tests in Firefox and Internet Explorer 9 is that the image maintains its aspect ratio when setting max-width and max-height. Which browser are you seeing this problem in?
Google Chrome. Also what syntax do you use? This?:
img {padding: 10px 5px;max-width: 600px;max-height: 100%;}

Any help would be appreciated :)

Edited by Vaibhav
Link to comment
Share on other sites

Yes I'm using the same code. Testing in Google Chrome I just got the same results. Maybe something else in your page is causing this to happen.

Link to comment
Share on other sites

What is the html code? you should have if context box width 600px; Note: you have to allow for left right padding and reduce image by these

#img_content {width:600px; margin: 0 auto; background-color:#FF0099; text-align:center;}#img_content img {padding:10px 5px;max-width: 590px;max-height: 100%;}

<div id="img_content"><img src="../dsonesosprey.jpg" /></div>

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...