Vaibhav Posted April 24, 2012 Share Posted April 24, 2012 Hi everyone, This is my first post here, so probably welcome me. 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 More sharing options...
Ingolme Posted April 24, 2012 Share Posted April 24, 2012 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 More sharing options...
Vaibhav Posted April 25, 2012 Author Share Posted April 25, 2012 (edited) 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 April 25, 2012 by Vaibhav Link to comment Share on other sites More sharing options...
Ingolme Posted April 25, 2012 Share Posted April 25, 2012 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 More sharing options...
dsonesuk Posted April 25, 2012 Share Posted April 25, 2012 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 More sharing options...
Vaibhav Posted May 5, 2012 Author Share Posted May 5, 2012 Thanks! max-height:100% actually works Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now