Maintaining Image Proportions Without Hidden Overflow [Archive]

View Full Version : Maintaining Image Proportions Without Hidden Overflow

hyperhutch

09-23-2011, 03:36 PM

Hey all,

I am new to CSS coding (back in the day I used regular old HTML 4.0). I have been managing to figure most things out by web searches and trial and error, but I find myself fumbling around a lot and wasting tons of time.

I have had a website up for about a year now, and as I am trying to get an image gallery set up I don't know how to properly customize the free code I copied. Here's the URL of the test page and the current code.

Just click on the image and it will scroll through the images.
http://www.mhwoodart.com/gallerytest.html

<head>

<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
</head>

<style>

/* root element for single scroll */
.scroll {
position:absolute;
overflow:hidden;
width: 300px;
height: 200px;
float:left;
}

/* root element for the scroll pics */
.scroll .pics {
width:200em;
position:absolute;
clear:both;
}

/* single scroll item */
.pics img {
float:left;
cursor:pointer;
width: 300px;
margin:0px;
}

/* possible settings for the active scroll */
.scroll.active {

}
</style>

<body style="margin:0;">

<table border=0 style="padding:0;border:1px solid #999;"><tr><td>



<div class="scroll">
<div class="pics">
<img src="images/Available/HickoryNEBowl.jpg" />
<img src="images/Available/Plume.jpg" />
<img src="images/Available/ApplePlatter.jpg" />
</div>

</div>

</td></tr></table>

<br clear="all" />

<script>

// enable scrolls. a simple magical one liner
$(".scroll").scrollable({size: 1, loop: true});
</script>

</body>

As you can see on the test page the middle image is tall and narrow. It's set to resize to the full width of the table, but I need to resize it's height and keep its proportions. I know how to squash the image into the cell, but I don't know how to have it automatically resize. I have been having trouble finding useful coding tutorials using search engines, and that's probably because I don't exactly know what I need to search for.

Thanks!

Hyperhutch

jscheuer1

09-24-2011, 12:11 AM

First off, and just in case you don't, I hope you realize that you cannot take dissimilar sized images and somehow shoehorn them into a box and have them both fill that box and maintain their native aspect ratio. I think you do, as the first and third images obviously fit into the box, maintain their aspect ratio, but do not fill the box.

That said, in all browsers except IE 6 and less, you may use max-width and max-height. On your example page (not in your posted code) the box is about 500x500 (give or take one or more pixels for padding, whatever). So, where you have on that example page:

/* single scroll item */
.horizpics img {

float:left;
cursor:pointer;
width: 500px;
margin:0px;
}

You can instead:

/* single scroll item */
.horizpics img {

float:left;
cursor:pointer;
max-width: 500px;
max-height: 500px;
margin:0px;
}

But that causes another problem, one you would have anyway because now the .horizpics img images are not of uniform width.

But at least I answered your original question. This is another situation not unlike that I tried to be clear about at the beginning though. If you step through things by width, and they're not all the same width . . ., well you get the idea.

You could give the middle one left/right padding or margin to get it to fill out its place. But that would mean knowing its actual presentational dimensions and perhaps using a different script, like maybe:

http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

There are tons of similar scripts around.

Regardless of the script though, it's perhaps possible to compute the needed padding or margin via javascript. I mean it can be done. It's just a question of when - can it be in time to present things smoothly and as desired, and of whether or not it can fit into the workings of the slider you end up using.

hyperhutch

09-24-2011, 01:00 AM

Okay, I think that's what I needed to know. I wasn't sure if there was any way to get all the pictures, without resizing and regardless of "portrait" or "landscape" orientation, to fill the table with the longest dimension and maintain their proportion. I just wanted to be lazy when uploading my photos. :D

Here's what it looks like on my webpage with the pictures edited to be the same size as the table cell, 560 pixels.

http://mhwoodart.com/gallery.html

Thanks!

Hyperhutch