TylerPutnam Posted September 11, 2015 Share Posted September 11, 2015 I have a page designed to display a larger image above then you hover over a thumbnail of the same picture. My problem is that I want the display area to have a max-height of 600px OR a max-width of 900px. Right now the pictures that are different sizes cause the HTML to jump all over the place. I would like for the area for display to stay that 600px by 900px and the images to display within that area according to their size. If the height of the picture hits 600px before the width hits 900px, I want it to stop there. If the width hits 900px before the height hits 600px, I want it to stop there. Any suggestions? Thank you. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2015 Share Posted September 11, 2015 For that you need to determine if the image is landscape or portrait, then apply width: 100%; height: auto; or visa versa depend on type of image using JavaScript. Link to comment Share on other sites More sharing options...
TylerPutnam Posted September 11, 2015 Author Share Posted September 11, 2015 For that you need to determine if the image is landscape or portrait, then apply width: 100%; height: auto; or visa versa depend on type of image using JavaScript. When I use height: 600px; width: auto; it causes the pictures that are wider to span across the whole page, but I would like for the image to stop at 900px and keep its proportion. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2015 Share Posted September 11, 2015 If you have a container element width 900px;, height: 600px the image is portrait you set height: 100%; width: auto; the image will expand the height available it proportionally. If the imave is landscape you use width: 100%; height: auto; it will expand proportionally to the width availible to it. Link to comment Share on other sites More sharing options...
TylerPutnam Posted September 11, 2015 Author Share Posted September 11, 2015 If you have a container element width 900px;, height: 600px the image is portrait you set height: 100%; width: auto; the image will expand the height available it proportionally. If the imave is landscape you use width: 100%; height: auto; it will expand proportionally to the width availible to it. Yes, however the pictures I will be uploading to this space are different sizes. Some of the pictures are taller than they are wide, and vice versa. So if I use auto for either the height or width, then the photo will either be too wide or too tall for the space I would like the photo to fit in. I am trying to find a way that would make sure the height is never larger than 600px and the width is never larger than 900px while still keeping the photo in proportion to its original size. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2015 Share Posted September 11, 2015 You have to identify if image is of portrait or landscape and if it is large enough to fit width of 900 or height 600 and change from height: 100%; width: auto; to max-height: 100%; width: auto; <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>http://w3schools.invisionzone.com/index.php?showtopic=53984&hl=</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> var onload_img_width, onload_img_height; function ResizeFullProportionally() { if ($('#image_viewer_inner img').height() > $('#image_viewer_inner img').width()) { $('#image_viewer_inner img').addClass('port'); } else { $('#image_viewer_inner img').addClass('land'); } if ($('#image_viewer_inner img').height() < $('#image_viewer_middle').height() && $('#image_viewer_inner img').hasClass('port')) { $('#image_viewer_inner img').removeAttr('style'); $('#image_viewer_inner img').removeClass(); $('#image_viewer_inner img').addClass('small_port'); } if ($('#image_viewer_inner img').width() < onload_img_width && $('#image_viewer_inner img').height() < onload_img_height && $('#image_viewer_inner img').hasClass('land')) { $('#image_viewer_inner img').removeAttr('style'); $('#image_viewer_inner img').removeClass(); $('#image_viewer_inner img').addClass('small_land'); } } $(function() { onload_img_width = $('#image_viewer_inner img').attr('width'); onload_img_height = $('#image_viewer_inner img').attr('height'); ResizeFullProportionally(); $('#thumbs img').click(function() { $('#image_viewer_inner img').removeClass(); $('#image_viewer_inner img').attr('src', $(this).attr('src')).css({'height': 'auto', 'width': 'auto'}); //$('#image_viewer_inner img').attr('src', $(this).attr('src').replace('_thumb', '')).css({'height': 'auto', 'width': 'auto'}); //if using thumb image myimage_thumb.jpg use this to remove '_thumb' part of filename to show original image ResizeFullProportionally(); }); }); </script> <style type="text/css"> body, html {margin:0; padding: 0;}/* */ #image_viewer_outer{display: table; width: 100%; margin: 10px 0;} #image_viewer_middle {height: 600px; text-align: center; /*background-color: #B7F0FF;*/ vertical-align: middle; display: table-cell; font-size:0;} #image_viewer_inner { /* background-color: #bff08e;*/ display: inline-block; max-height: 600px; max-width: 900px; } #image_viewer_inner img { max-height: 600px; max-width: 900px; } #image_viewer_inner img.port {height: 100%; width: auto;} #image_viewer_inner img.land {width: 100%; height: auto;} #image_viewer_inner img.small_port {min-height: 100%; width: auto;} #image_viewer_inner img.small_land {min-width: 100%; height: auto;} #thumbs {text-align: center;} #thumbs img {width: auto; height: 100px; margin: 10px; border: 1px solid navy; cursor: pointer; max-width: 150px; } </style> </head> <body> <div id="image_viewer_outer"> <div id="image_viewer_middle"> <div id="image_viewer_inner"> <img src="../AlienVsPredator.jpg" width="900" height="600" alt="AlienVsPredator"/> <!-- height and width attributes required --> </div> </div> </div> <div id="thumbs"> <img src="../AlienVsPredator.jpg" width="1022" height="780" alt="AlienVsPredator"/> <img src="../dsonesosprey.jpg" width="501" height="700" alt="dsonesosprey"/> <img src="../clonewars_body.jpg" width="1800" height="1594" alt="clonewars_body"/> <img src="../media-page-bg.jpg" width="949" height="560" alt="media-page-bg"/> <img src="../bgimagetest.png" width="970" height="135" alt="bgimagetest"/> <img src="../images/mod_jq4.jpg" width="218" height="310" alt="mod_jq4"/> <img src="../images/bannerLogo-490x118.png" width="490" height="118" alt="bannerLogo-490x118"/> </div> </body></html> obviously use proper thumb nail sized images. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now