Hey guys,

 

http://i60.tinypic.com/24v7dxl.jpg

 

I have this fluid grid set up that splits into single images at 480px. It works fine but if you drag the window down to just before the 480 mark you'll see the larger image not stick to the full height of the container.

 

I've read a lot on getting divs to stick to the height of the containers, but I cannot seem to find a solution that works with this current set up.

div container - fixed height

 

img in div width: 100% height: auto

 

does that work for you?

 

Btw the link doesn't work for me

Sorry, posted a link to one of the images by accident. See here.

 

http://jsfiddle.net/jF38E/

 

Cheers for the answer, however my heights are currently based off images so nothing has a fixed height - that's kind of the main part of the issue.

 

Any ideas how to do this with my current setup? I don't mind altering it if there's an easier way, just so long as the end results the same.

In order to get an element such as a div to act like a responsive image - i.e. it keeps it's aspect ratio when it's width is reduced you can do the following:

 

Give the element a height of zero, and a padding bottom a percentage the height of the padding bottom will then be directly related to the parent block's width.

 

Then when you want this element to contain something, say an image then do the following after the above:

Set the position of the element to relative, nest in the child such as an image. Give the image a position of absolute, top, right, left, bottom of zero, and set the width and height of the image to 100%.

 

I do this often when I want things to keep their height even if the user inputs a small image, it will always expand to fit the container, which itself is still responsive.

 

Here is a fiddle to demonstrate this working:

http://jsfiddle.net/J9nX4/

Edited March 20, 201412 yr by rbrtsmith

Cheers for that, it seems the images are now sticking to the container, but the div that holds the image isn't sticking to the height of the entire row, maybe due to the two images to the left pushing it all down a little? (only noticeable at a little before the 480px width mark).

 

http://jsfiddle.net/jF38E/

Sorry, but I don't suppose anyknow knows if the aspect ratios have to be exactly the same for this to work? Here's an example of rbrsmitsh method, but the divs still aren't lining up when shrunk. Is it the padding that's causing the issues maybe?

 

http://jsfiddle.net/fCnhP/

Your media query is targeting 1 px bellow your target size

@media (max-width: 479px)

It should be at least 1 px above to stop this happening.

Your media query is targeting 1 px bellow your target size

It should be at least 1 px above to stop this happening.

 

Think you're still looking at the old fiddle I first posted. I took the queries out in the latest version so the different in height was more clear.

Think you're still looking at the old fiddle I first posted. I took the queries out in the latest version so the different in height was more clear.

Sorry I read your content but failed to see the link had been updated

Without using any measuring device it looks like the 2 images on the left, which are lining up bellow the right image when the browser is shrunk, are maintaining their original aspect ratio's. Maybe it is the actual ratio of those two images Before you change the screen size not being the same as that of the right hand image that is making things look broken when they are probably working correctly.

 

Try setting the widths up slightly differently so that all three images start with the same aspect ratio, ie. making the right image a couple of px wider and the other two a 1 or 2 px narrower. This could bring in a better balance to the layout too.

Without using any measuring device it looks like the 2 images on the left, which are lining up bellow the right image when the browser is shrunk, are maintaining their original aspect ratio's. Maybe it is the actual ratio of those two images Before you change the screen size not being the same as that of the right hand image that is making things look broken when they are probably working correctly.

 

Try setting the widths up slightly differently so that all three images start with the same aspect ratio, ie. making the right image a couple of px wider and the other two a 1 or 2 px narrower. This could bring in a better balance to the layout too.

 

I've actually tried that and can't get any sort of measurement to line up. The last link I posted:

 

http://jsfiddle.net/fCnhP/

 

Shows it without images and working off measurements - but it still varies the heights when shrunk down. Not sure if it's going to be possible using this method to be honest. I don't suppose you (or anyone) knows any better ways of achieving this?

I've actually tried that and can't get any sort of measurement to line up. The last link I posted:

 

http://jsfiddle.net/fCnhP/

 

Shows it without images and working off measurements - but it still varies the heights when shrunk down. Not sure if it's going to be possible using this method to be honest. I don't suppose you (or anyone) knows any better ways of achieving this?

 

Although I don't know how you would work it, there may be a way to 'tweak' the layout by using cropping. But ONLY if the actual image content could be cropped without adversely affecting your design. ie. As the small image/s gets smaller with the browser window, scale it up and then crop it to fit the desired width and height, or scale the larger image down before cropping the smaller image to match the height.

 

I do know it would be very tricky to ensure this method didn't break in different browsers and devices though.

 

Using an svg and editing the xml for the image might make this possible to control, you may need to use an HTML canvas to make things work smoothly and flow.

Yeah I figured as much. Cheers for the help anyway, appreciate it. I'll check out some javascript solutons tomorrow.