-1

I have a fluid layout and I have a div that matches the height and width of the browser window at all times, even when the browser is resized. So a div that is 100% height and 100% width of the browser window.

Within this div I have an image that fits 100% of its parents width and height. So in theory this image will be fullscreen. At the moment, when you make the browser window larger, the image size exceeds that of its parent and the right hand side & the bottom of the image gets cut off.

How can I get all edges of the image cut off when the browser window is enlarged? So I guess I want to vertically center the image within its parent.

All the images/divs widths are calculated using percentages.

Here's the link to my existing code: http://jsfiddle.net/PfzQ8/4/

Edit: That jsfiddle isn't the problem code its just the code I currently have and would like to expand on it.

egr103
  • 3,858
  • 15
  • 68
  • 119
  • I don't think I'm able to reproduce your problem on jsfiddle using Chrome. Also, do you want the image to stretch to fill 100% of the available space, or scale proportionally to fill 100% of either width or height? – Kyle Feb 28 '12 at 15:15
  • doesn't appear you tried to search this topic... there are a multiude of solutions all easily uncovered in a quick search – charlietfl Feb 28 '12 at 15:52
  • @charlietfl I believe my problem is different in that its a fluid layout where I do not know the height of my container and want to scale my image to about 400% (for example) from the very centre of a DIV. Therefore think the vote down is a little harsh as I can't seem to find any solutions to that on StackOverflow. I may try this solution though to see if it will fix: http://css-tricks.com/centering-in-the-unknown/ – egr103 Mar 01 '12 at 11:11
  • Just as a note, that method on css-tricks didn't work – egr103 Mar 01 '12 at 15:29

1 Answers1

0

This has been voted down I think because of my wording more than anything but after re-posting another question I found a suitable answer, see here: Scaling an inline image from the absolute center of its parent?

Community
  • 1
  • 1
egr103
  • 3,858
  • 15
  • 68
  • 119