3

I'm working on a portfolio for cinematographers. They also do a lot of photography, and they want their image thumbnails to remain in proportion, so that the image doesn't lose any of it's aesthetic when made smaller.

What I'm looking for is a way to make the images keep their original proportion, but scaling them and fitting them into a container div. (With a set width and height)

I've tried basically everything. Including the traditional way to scale images in proportion:

background:url(../images/banner.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

This works great for scaling, but it still cuts off the image. (wich is what I'm trying to avoid)

I've been searching like a tweeker on meth but can't find ANYTHING that solves this problem. It might be that I'm searching for something that's not solvable in the way I want it.

Anyway.. tl;dr:

I want thumbnails to keep their original image proportion, but be about 3 times as small and fit a container div. (With fixed width and height) Anyone have any ideas on how to accomplish this?

Here's an example of what I'm trying to achieve.

Henrik Andersson
  • 45,354
  • 16
  • 98
  • 92
Jefferson
  • 993
  • 2
  • 16
  • 35
  • 1
    http://stackoverflow.com/q/3029422/114029 and http://unstoppablerobotninja.com/entry/fluid-images – Leniel Maccaferri Apr 12 '13 at 22:19
  • No see.. I know how to make fluid images. I'm trying to make a gallery with images that keep their original proportions.. only smaller. And make that collection of images fit into a div. – Jefferson Apr 12 '13 at 22:21
  • Do you want to fit width and height in a container... All the images are the same proportion? If so the use: `img { max-width: 100%; }` – Axel A. García Apr 12 '13 at 22:25
  • I would use media queries – Kevin Lynch Apr 12 '13 at 22:37
  • 3
    I believe it is a confusing question, could you put a example of what you want please? – Pigueiras Apr 12 '13 at 23:16
  • I've tried to explain to the best of my abilities. I've placed a link to a jQuery plugin that sort of shows what I'm trying to accomplish. I want the images to keep their proportions and fit into a div. – Jefferson Apr 12 '13 at 23:19
  • I think the best approach is still having your server side generate the thumbnails – You Qi Apr 14 '13 at 09:41

1 Answers1

0

have you tried setting width to some % as per your div and image ratio..just call a javascript to check width of image and of your div then accordingly set css attribute "width: " of image to require percentage using script and height as auto.....and vice versa if height is more but if setting auto doesn't work try to set ratio manually for example 

function set()
{
var img=document.getElementById('anyimg');
var iwidth=img.width;
var iheight=img.height;
var wr,hr;
var mydiv = document.getElementById('anydiv');
divH=mydiv.height;
divW=mydiv.width;
wr=iwidth/divW;
hr=iheight/divH;
if(hr>wr)
{
image.height=divH;
image.width=iwidth/hr;
else
{
image.height=divH;
image.width=iwidth/hr;
}}
Dapu
  • 195
  • 1
  • 3
  • 13