I'm working on a fluid-layout website with two main divs side-by-side at 50% width each. One of these divs is split horizontally with 2 divs at 50% height each. Inside these divs are images or videos which need to fill the container div.

Whatever the viewport dimensions, the image will always scale to take up 100% of the available height (try resizing the window)

HTH

Edit: Oops! Ryan was faster and has a better solution. Note to self: Just because you can do it in jQuery, doesn't necessarily make it a good idea

gktareen
—
2013-01-22T15:40:26Z —
#4

Thanks for your replies guys. The solutions above are good but they do not keep the proportions of the image. The image needs to fill both the height and the width at 100% without stretching or squashing the image. Please see this website as an example: http://belstaff.com

RyanKing1809
—
2013-01-22T22:23:05Z —
#5

gktareen said:

Thanks for your replies guys. The solutions above are good but they do not keep the proportions of the image. The image needs to fill both the height and the width at 100% without stretching or squashing the image. Please see this website as an example: http://belstaff.com

Unless you've defined a height it should maintain the proportions - or you could try height:100% but it wont always fill the container like you're after. You could try background-size:cover http://css-tricks.com/perfect-full-page-background-image/ - there's some jquery there they you might be able to use on videos as well.

luc_tw
—
2013-01-22T22:53:52Z —
#6

To maintain image proportion and still fill whole container. We must set container's overflow: hiddenAnd set shortest side to 100% and make another side to auto. (Some portion will be clipped out)

Pullo
—
2013-01-23T13:53:53Z —
#7

Hi,

The page you link to uses JavaScript to automatically resize the image.However, this doesn't always work flawlessly and by manually resizing your browser, it is quite easy to create a gap between the image on the left and the content on the right.Also, parts of the image get cut off if you resize your browser below certain dimensions.This is logical as the aspect ratio must be preserved, so that the image doesn't get squashed or stretched.

If I was you, I'd opt for Ryan's CSS solution, so that the image always fills the height of the viewport and live with the fact that 100% height, 100% width, correct aspect ratio and no cropping will not be possible.

If you're interested this is the code the other site uses to do the resizing: