1

So I have some parent container/div positioned 'fixed' on the page. It's height and width are set to 100%. Within the container is an image. I currently have written some JavaScript so that the image stretches either to 100% width or 100% height of the container, depending on the image's dimensions. The image is then vertically or horizontally centered. As well, this is done every time the window is re-sized so that the image is always centered and fits.

Currently this is working wonderfully, but ... this is besides the point. The real question is this: Is there a way of doing this with just CSS? In other words, is it possible for an element to stretch proportionally to it's container but not be clipped/cut-off and doing so with JUST CSS? Also, NOT background-size: contain. Hacks are also welcome. Thanks.

I set up a fiddle for anyone that wants to mess around... HERE.

EDIT

Just in case someone out there on the interwebs is looking...
A viable alternative to using an <img> can be the CSS background-size property. Browser compatibility and more info from the Mozilla Developer Network HERE

Terry
  • 675
  • 2
  • 9
  • 21
  • Why not background-size: contain? – Mike Robinson May 07 '13 at 03:45
  • @Mike Robinson it's cuz of legacy ie support. ie8 is still too common. – Terry May 07 '13 at 03:50
  • Sounds like you're looking for object-fit, but only one browser supports it: http://dev.opera.com/articles/view/css3-object-fit-object-position/ – cimmanon May 07 '13 at 11:16
  • possible duplicate of [Scale image to fit a bounding box - CSS-only](http://stackoverflow.com/questions/9994493/scale-image-to-fit-a-bounding-box-css-only) – user Mar 08 '14 at 02:47

2 Answers2

1

Is there a way of doing this with JUST CSS? In other words, is it possible for an element to stretch proportionally to it's container but not be clipped/cut-off and doing so with JUST CSS?

If you set the height of the image to 100% only without setting the width, it will stretch proportionally to its container without being clipped or cut off. Same for setting the width only to 100% and not setting the height.

Edit

You can't do what you want to do using only CSS as you would need to know if the aspect ratio of the image is higher or lower than its container, CSS can't do that. Have a look here for a more detailed explanation of the issue at hand by Stephan Muller

Community
  • 1
  • 1
Mathijs Flietstra
  • 12,900
  • 3
  • 38
  • 67
  • This will work... BUT what if the image is set to '100% height' and the width exceeds the container? It will be clipped. Also applies to 'width 100%' && 'height auto'. I could create separate classes for portrait or landscape images but I want to get this done in one CSS rule. – Terry May 07 '13 at 03:48
  • 1
    In that case you should have a look at this answer: http://stackoverflow.com/a/9994936/1846192 which explains quite clearly why you can't do what you want with only CSS. – Mathijs Flietstra May 07 '13 at 06:03
  • Thanks! Please update your question, when you have the time, and I will check it off as the answer. I'm going to update my question with a CSS3 'background-size' and 'ms-filter' link for those who are looking and interested for a possible alternative. – Terry May 07 '13 at 08:30
-1

All you need is to specify height and width to be 100%, eg:

#makeMeStretch {
    height: 100%;
    width: 100%;
    background: #FFF;
}

I updated your fiddle

donramos
  • 534
  • 3
  • 10