PDA

View Full Version : Confused about max width/height



JFro
Aug 10th, 2009, 09:37 PM
At the moment the photos in my slideshow can be either portrait or landscape orientated. The problem is, a portrait photo disapears off the page. Although I can scroll down to view the rest of the photo, I would like visitors to be able to see all the images in the slideshow without any scrolling.
So I was pleased to discover max-width and max-height are fairly well supported. But they distort the photos... here's the CSS code:


#show{padding-top:2%;}
img.size{max-height:500px; max-width:350px;}

and the HTML


<div id="show">
<img class="size" id="slideshow" alt="Slideshow" width="50%" src="pics/DSC_0168.jpg"/>
</div>

The portrait photos seems to want to stretch too far, perhaps to the max-width size? Am I missing something?? Photo size is not set anywhere else for these images.

Thanks! :)

noneforit
Aug 10th, 2009, 10:03 PM
What size are the photos themselves?

Also have you got a link to the live site?

JFro
Aug 10th, 2009, 10:42 PM
The images themselves are 640 x 428...I'm sure there must be something logical here, just cannot get my head round it!

here (http://www.jessica-elyn.co.uk)is a link to the site. This version is not using max-width or max-height, but you can see the problem I am having I hope...

noneforit
Aug 10th, 2009, 10:53 PM
hmmm i dont see the problem in FF3 or IE8...only scroll bar i see is the main scroll bar due to my screen resolution

Used IETester to check IE6 and 7 and the site does not look good :eek:

JFro
Aug 11th, 2009, 12:04 AM
No I dont expect it does look good...haven't dared look yet! Quite new to the web programming side of things I guess, and haven't given it a lot of time.

Let me reitterate the problem. All I want to do is make the images display within a certain area, so when I place the slideshow within my webpage, it doesn't keep resizing all over the place.
I want to set the images to stay within a certain width and height without any distortion.
At the moment (on the link) any potrait-orientated images (taller than they are wide) are too big - I need to set a max height....

The only scroll bar I get is also on the main page...

SB65
Aug 11th, 2009, 12:12 AM
I think your max-height solution might work, but at the moment you're also setting the width to be 400px for every image in your html. If you remove this and apply a max-height that might do the trick. That knocks the centering of your image off as well though, so you might need to play around with that as well.

EDIT: Setting the left and right margin on img.centre to auto should take care of that last point.

JFro
Aug 11th, 2009, 01:19 AM
Hm yes I think you are right, I think it is working - I have made those changes and they are now live, thanks for that. The problem now is how the images are centred - the top of the portrait images are aligned with the top of the landscape images, if that makes sense. Maybe if I add a border to the div instead...then I would just need to centre the landscape images vertically within the div so they appear in the middle of the div and not at the top (and the portraits horizontally)... :confused: