Page 2 of 2 FirstFirst 12
Results 11 to 12 of 12

Thread: Image scales to fit height

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #12
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,398
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    35

    Default

    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>
    Last edited by molendijk; 02-19-2013 at 02:43 PM.

Similar Threads

  1. Replies: 0
    Last Post: 08-11-2009, 07:19 AM
  2. Replies: 12
    Last Post: 01-25-2009, 04:57 PM
  3. Thumbnail container that scales?
    By bassa in forum CSS
    Replies: 3
    Last Post: 12-30-2008, 10:28 AM
  4. how to specify width & height of the image in light box image viewer
    By charlespp in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 12-10-2008, 05:05 AM
  5. Min Height on Repeating Image
    By superjoepsu in forum CSS
    Replies: 0
    Last Post: 08-22-2008, 06:19 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •