0

I have designed a 'grid view' to display items on my site. However, because it's completely responsive, the images cannot be a fixed width. This is what I'm trying to achieve.

  1. The image must not stretch past it's original dimensions
  2. The image may not change proportions
  3. The image should be vertically and horizontally centered in the box that is clipping (overflow:hidden) it.

More or less, I'm trying to make the image, fill the container but only if it can without changing proportions or stretching, obviously it would have to check against the height and width of the image and it's original size but I don't know how to do this, can anyone help with this?

A simple version of the current grid item I have in the fiddle provided would be as follows:

<div class="container">
    <div class="item"><div class="overflow"><img src="/bla.jpg" /></div></div>
</div>

Where the overflow would have a fixed height and width, only changing depending on screen size, and would 'clip' the image.

http://jsfiddle.net/Xzzks/

Shannon

Shannon Hochkins
  • 11,763
  • 15
  • 62
  • 95
  • http://stackoverflow.com/questions/787839/resize-image-proportionally-with-css – Sen Jacob May 07 '13 at 05:56
  • [Scale image to fit a bounding box - CSS-only](http://stackoverflow.com/questions/9994493/scale-image-to-fit-a-bounding-box-css-only/9994936) – Sen Jacob May 07 '13 at 05:58
  • Resize image on clientside using jquery/css is not a good option, you need to do on `serverside` also image ratio depend upon corresponding landscape/potrait images – Satinder singh May 07 '13 at 06:02

1 Answers1

0

I have updated the fiddle.

http://jsfiddle.net/Xzzks/1/

Major changes

.gridItem .itemImage img {
    width:auto;
    /*min-width:100%;
    min-height:100%*/
    max-width:100%;
    max-height:100%
}

Hope this helps.

Nitesh
  • 15,425
  • 4
  • 48
  • 60
  • I did have this originally, but I'd like it to cover the 'overflow' container if the image is big enough, clipping part of the image. Example, if there's an image that's 4000px high and 200px wide, I'd like to instead of just make it fit into the container, add some smarts in to 'cut off' some of the image depending on the height, but never stretch it. – Shannon Hochkins May 07 '13 at 06:42