Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Image scales to fit height

  1. #1
    Join Date
    Nov 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Image scales to fit height

    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

  2. #2
    Join Date
    Nov 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Any ideas of a script that can do this?

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,884
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    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
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  5. #5
    Join Date
    Nov 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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:

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

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

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

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    pressppm (11-21-2012)

  8. #7
    Join Date
    Nov 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 11-21-2012 at 03:57 PM. Reason: detail
    - John
    ________________________

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

  10. #9
    Join Date
    Nov 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

  11. #10
    Join Date
    Nov 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

Similar Threads

  1. Replies: 0
    Last Post: 08-11-2009, 06:19 AM
  2. Replies: 12
    Last Post: 01-25-2009, 03:57 PM
  3. Thumbnail container that scales?
    By bassa in forum CSS
    Replies: 3
    Last Post: 12-30-2008, 09: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, 04:05 AM
  5. Min Height on Repeating Image
    By superjoepsu in forum CSS
    Replies: 0
    Last Post: 08-22-2008, 05: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
  •