Image scales to fit height

**jscheuer1** · 02-19-2013, 12: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:

Code:

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, 01: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):

Code:

<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:

Code:

<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>

Thread: Image scales to fit height

Thread Tools

Search Thread

Similar Threads

Auto adjust height for module tab based on biggest tab height with pure CSS

Javascript Random image loader: load image at 100% screen height

Thumbnail container that scales?

how to specify width & height of the image in light box image viewer

Min Height on Repeating Image

Bookmarks

Bookmarks

Posting Permissions