Image scales to fit height

**pressppm** · 11-19-2012, 04: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/phot...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, 12:18 PM

Any ideas of a script that can do this?

**Beverleyh** · 11-20-2012, 12:29 PM

Maybe this?: http://thewebthought.blogspot.com/20...according.html

**bernie1227** · 11-20-2012, 07:39 PM

Code:

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, 09: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/phot...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:

But when for example the window is resized they still fit the height:

**jscheuer1** · 11-21-2012, 01: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:

HTML Code:

<!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/s...izoom/100h.htm

**pressppm** · 11-21-2012, 01: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, 03: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, 02: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, 11:34 AM

Hi,

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

Code:

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?