Log in

View Full Version : Image scales to fit height


pressppm
11-19-2012, 05:53 PM
Hi,

I'm trying to create simple div of images that scrolls horizontally.

However, i'm trying to make the image fill(resize/scale) to fit the height of the users screen is. (Potentially adding a max/min height as well)

Here is an example of what I wish to create:
http://www.catsanddogsparis.com/photographers/xavier-cariou/

Although i want mine to fill the whole height so it touches the top and bottom of the page.

I'm not sure where to start. Are there any existing plugins that could achieve this?

Regards
pressppm
11-20-2012, 01:18 PM
Any ideas of a script that can do this?
Beverleyh
11-20-2012, 01:29 PM
Maybe this?: http://thewebthought.blogspot.com/2012/05/javascript-set-image-height-according.html
bernie1227
11-20-2012, 08:39 PM
var img = document.getElementById("your-image.png");

if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}

img.style.height = winH;
img.style.width = winW;

like that?

http://jsfiddle.net/bernie1227/q4hme/1/embedded/result/
^ demo
pressppm
11-20-2012, 10:20 PM
Hi. Thanks for your replies!

I have done a simple diagram of what i'm after.
Basically the images will be in a div and display horizontally.
But i want the div to scale to always fit the height of the window(in the diagram i have a slight margin i might use).
And also when the window is re-sized it scales like the example i posted before:- http://www.catsanddogsparis.com/photographers/xavier-cariou/
Pretty much the same as that example but so it fills maximum height.(not bothered about the image hovers etc)

So the images fill the height of the window and are scrollable:
http://i.imgur.com/c95Bp.jpg
But when for example the window is resized they still fit the height:
http://i.imgur.com/AJMKh.jpg
jscheuer1
11-21-2012, 02:55 AM
Because however you do it, in order to have decent resolution on large screens you need large (huge) high res images, this entire idea is really only workable for high speed and high bandwidth.

That said:


<!DOCTYPE html>
<html>
<head>
<title>100% Height Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
white-space: nowrap;
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
}
body {
overflow-x: scroll;
}
img {
height: 100%;
vertical-align: top;
}
</style>
</head>
<body>
<img src="angelina.jpg" alt="">
<img src="saleen.jpg" alt="">
<img src="milla.jpg" alt="">
<img src="jaguar.jpg" alt="">
<img src="hayden.jpg" alt="">
</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/side/featuredimagezoomer/multizoom/100h.htm
pressppm
11-21-2012, 02:52 PM
That's perfect! I didn't know it would be that simple. I just couldn't figure it out in my head.

Your point about the image sizes is a good point. And is the bit i was struggling to understand.
I guess i'd want a min and max added to it. So the images stop resizing at min height (350px) max height (700px).
That would need to be javascript no?
jscheuer1
11-21-2012, 04:24 PM
The min-height and max-height are valid css properties and if used (they would be applied to the img selector) would limit how short and how tall the images could become. Using min-height with that layout would produce a situation where, if the browser were too short, not all of each image could be seen. The user would have to make the browser window taller to see the complete images. I believe they would be cut off at the bottom. And I'm not sure a min-height would really be necessary for any real reason. Using max-height would make it so that if the browser window's view area were taller than that, there would be blank space, probably again at the bottom. But that would allow you to use images that are no taller than that max-height without fear of them losing resolution. But you still might need a fairly large image. On my fairly old laptop here, my window is 900px high and the view area is 691. Laptops have notoriously short screens. So you'd still be talking about perhaps 1000px high or higher images. 100mbps would be about the minimum reasonable connection speed for that if say you had about 10 images.

You could use javascript to limit the size of the window, but of the various ways that can be approached, some browsers will either by default or by configuration block that. You could make a div element that appears on or floating on a page that would not be blocked though. It should never be any wider nor taller than the window's view area nor appear outside it, and could be fairly easily setup as to max-height. When I get more time I may look into that. But that sort of defeats the purpose of resizing to the window.
pressppm
11-22-2012, 03:14 PM
Hi.

I think i've got it sorted from that thanks! I've added the min/max in css and now it works fine.
I'm not too fussed about the margin appearing once the image reaches it's max height. It's just i want the images to never be cropped so people on small screens will always see it as big as possible and people on bigger screens will see the scaled up version.

Thanks for you help!
pressppm
02-19-2013, 12:34 PM
Hi,

Using the script above I have a really simple full height image div. Now with min and max:



html, body{
white-space: nowrap;
margin: 0px;
background:#f1f1f1;
height: 100%;
overflow: hidden;
overflow-x: auto;
}

#imageslide{
margin:0px 0px 0px 0px;
height: 100%;
min-height:300px;
max-height:600px;

}

img {
height: 100%;
vertical-align: top;
margin:0px 5px 0px 0px;
}


However, I want to have a menu along the top of my page. Roughly 30px high.
If I give the #imageslide and top margin of 30px I can fit in my menu but I lose that 30px on the bottom now. It crops in 30px before resizing the image.

Does that make sense? How can I go about adding a margin at the top?
jscheuer1
02-19-2013, 01:27 PM
I'm not sure. Why is the question about margin though? That might not be that bad of an idea. You could try adding a margin-top: 100px or whatever space you need to body. put that after the first selector, like:


html, body{
white-space: nowrap;
margin: 0px;
background:#f1f1f1;
height: 100%;
overflow: hidden;
overflow-x: auto;
}

body {
margin-top: 100px;
}

#imageslide{
margin:0px 0px 0px 0px;
height: 100%;
min-height:300px;
max-height:600px;

}

img {
height: 100%;
vertical-align: top;
margin:0px 5px 0px 0px;
}

Then you could position your menu absolutely in that space. The only question is how that might throw off the presentation of the images. You could try padding-top instead. Perhaps if you added the same margin to the bottom of the body, that would make up for it.

But, as I said, why margin? You could perhaps fiddle with the percentages so that the images were -say only 80%, leaving 20% for the menu.

When I get some time, I'll have a look at this, using my demo as a jumping off point. If you have a page with the menu, regardless of weather it's working or not, if you give us a link to it, that might help.

One thought just occurred to me. This might be a good place to use frames. The images could go in the lower frame which could be set to take all remaining space. The menu could go in the top frame which would be of a set height.
molendijk
02-19-2013, 02:34 PM
You can put the images in divs that are positioned on the screen with 'position: absolute' and values for left, top, right, bottom, width and height.
An example would be (images are taken from the internet):

<head>
<style>
body{margin-top: 0px}
</style>
</head>

<body>
<div style="position:absolute; left:0px; top: 0xp; right: 0px; height: 30px; background: #dedede; border: 1px solid black; text-align: center">Height: 30px</div>

<div style="position: absolute;left:0px; top: 30px; bottom: 0px; width:33.3%; border: 1px solid black">
<img src="http://www.mymultiplesclerosis.co.uk/origins/images/homo-erectus-profile.jpg" style="position: absolute; width: 100%; height: 100%; " alt="">
</div>

<div style="position: absolute;left:33.3%; top: 30px; bottom: 0px; width:33.3%; border: 1px solid black">
<img src="http://www.dandebat.dk/images/186p.jpg" style="position: absolute; width: 100%; height: 100%" alt="">
</div>

<div style="position: absolute;left:66.6%; top: 30px; bottom: 0px; width:33.3%; border: 1px solid black">
<img src="http://drugline.org/img/term/h-erectus-6719_1.jpg" style="position: absolute; width: 100%; height: 100%" alt="">
</div>
</body>
Now, this might distort the images with certain screen resolutions. That's where you could replace the percentages for the images (here: 100%) with pixels and then use left, top, margin-left and margin-top to correctly position them. Example:

<head>
<style>
body{margin-top: 0px}
</style>
</head>

<body>
<div style="position:absolute; left:0px; top: 0xp; right: 0px; height: 30px; background: #dedede; border: 1px solid black; text-align: center">Height: 30px</div>

<div style="position: absolute;left:0px; top: 30px; bottom: 0px; width:33.3%; border: 1px solid black; background: #dedede">
<img src="http://www.mymultiplesclerosis.co.uk/origins/images/homo-erectus-profile.jpg" style="position: absolute; width: 300px; height: 300px; left:50%; top: 50%; margin-left: -150px; margin-top: -150px" alt="">
</div>

<div style="position: absolute;left:33.3%; top: 30px; bottom: 0px; width:33.3%; border: 1px solid black; background: #111111">
<img src="http://www.dandebat.dk/images/186p.jpg" style="position: absolute; width: 300px; height: 300px; left:50%; top: 50%; margin-left: -150px; margin-top: -150px" alt="">
</div>

<div style="position: absolute;left:66.6%; top: 30px; bottom: 0px; width:33.3%; border: 1px solid black; background: silver">
<img src="http://drugline.org/img/term/h-erectus-6719_1.jpg" style="position: absolute; width: 300px; height: 300px; left:50%; top: 50%; margin-left: -150px; margin-top: -150px" alt="">
</div>

</body>