1

I am using the 1140 grid by Andy Taylor (cssgrid.net), and have an image gallery. I am using max-width:100% & height:auto on the images which gets the width scaling I am looking for.

What I would like to do is limit the height of the DIV that contains the image. My first attempt was to set the height to a fixed size and use overflow:hidden. This works when the page is viewed at full size, but as the page scales down, the image reduces in size, showing more of the image. What I would like is for the height of the containing DIV with the overflow to scale proportionally with the width of the image.

Any thoughts? Thanks in advance.

jedifunk
  • 53
  • 2
  • 8
  • Do you know the image dimensions? Could you set height or width to a specific number? – Stanley Cup Phil May 20 '11 at 17:05
  • I do know the image dimensions, but the whole point is for them to be fluid, to scale up/down as the window is sized. obviously, with `max-width:100%` when goin gup it stops at 100%. part of my issue is that the images are all different sizes. some square, some rectangular, etc. so by using a set height i can control the gallery grid. again, the issue is when scaling down, i'd prefer that the height scaled proportionally. – jedifunk May 20 '11 at 17:39
  • Ahh.. Well in that case I have the same problem in another program. Hopefully your answer can help me out too – Stanley Cup Phil May 20 '11 at 17:42

1 Answers1

0

You can resize the container's height dinamically with JavaScript (jQuery) by checking the size of the image on window.onresize event and using the code provided in this answer.

This would be a mockup of the code:

HTML:

<div class="image-gallery">
    <div class="image"><img src="" /></div>
</div>

JS:

window.onresize = function(event) {
    var imgwidth = $('.image img').width();
    var imgheight = $('.image img').height();
    var divwidth = $('.image').width();
    var divheight = divwidth*imheight/imgwidth; //Aspect Ratio conversion
    $('.image').height(divheight);
}

has not been tested

Community
  • 1
  • 1
Naoise Golden
  • 8,373
  • 3
  • 44
  • 63
  • Do you know if it is possible to do this without JS? I haven't tried this solution yet, but was hoping for a CSS only option. I'll report back once I've tried this. Thanks. – jedifunk May 25 '11 at 19:46
  • OK, so my JS understanding is lacking here. I've read and reread your suggestion and the links provided, but am at a total loss as to how/where to apply this. any additional help or code is very much appreciated. – jedifunk May 26 '11 at 14:45
  • I believe it is not possible to do with CSS. I have written some code as how this would be done. Please feedback your results in case you try it, I haven't tested it. – Naoise Golden May 26 '11 at 16:06
  • Naoise - thanks. I am going to try this out now. Will report back shortly. – jedifunk May 26 '11 at 16:58
  • Ok, so I'm not sure its working, and I also think there are other variables at play that need to be fleshed out too. – jedifunk May 26 '11 at 17:04
  • 1. for the container DIV `
    ` In the CSS I have set the height to `.work-thumb { height:200; overflow:hidden}`. - when I remove the height, everything works as it should (without the JS). The images scale down as the window gets smaller. - same thing happened with the JS included. - reason I want the height & overflow is because the images are much larger, and I want "crop" them.
     – jedifunk May 26 '11 at 17:31
  • 2. I also may be implementing your code incorrectly. I am using Wordpress, and the images are pulled in via a custom loop (although I don't think that has anything to do with it). - I put the JS inside a file called scripts.js that contains most of my other JS, and is called at the bottom of my code as such '' any further help you can provide is greatly appreciated. – jedifunk May 26 '11 at 17:31
  • After some more testing, I found a typo in the code and also that I hadn't completely referenced the container DIV. With those things fixed, it now operates, but still doesn't produce the desired effect. On first page load, the CSS `height:200px` is used. Upon resizing, it begins using the JS, which then calculates based on the image size. What I need is for the initial `height:200px` to scale down as the window gets smaller. – jedifunk May 26 '11 at 19:54
  • @naoise-golden I'm working on the JS code now, as I'm thinking it really has nothing to do with the images themselves, but rather the containing div, which has its width set by the 1140 grid (fourcol). So I'm thinking that the math needs to use the new column width provided by the gird to calculate the height. This would be instead of calculating the width of the image since its 100% anyways. Does this make any sense? – jedifunk May 26 '11 at 21:37
  • ok, so my programming/math skillz suck, what can i say. i need an equation that takes the known width and the fact that max-height when viewed above 1024 is 180px, and then helps the height stay proportional to the width when scaling down. any thoughts? – jedifunk Jun 01 '11 at 16:08