Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Resizing my image proportionally

    Hello,

    I'm kind of stuck here. I managed to resize my image with a fixed div max-width of 960px and it actually works nicely as long as you resize it both vertically and horizontally. It also works when you resize the image horizontally keeping the height constant but it doesn't work the other way around. When I resize it vertically then the image gets cut off. I need the image to resize regardless of whether I'm changing the width or the height. I hope it's clear! I'm leaving the code below for more info.

    Thanks for the help!

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    	<style>
    		img {
    		max-width: 100%;
    			height: auto;
    			position:relative;
    			z-index:1000;
    		}
    		#container{max-width:500px}
    	</style>
    </head>
    
    <body>
    
    	<div id="container">
    		<img src="http://4.bp.blogspot.com/-5ZidK4NGC68/TzNOGRrdt8I/AAAAAAAADfU/r7_MCTq0WUA/s1600/Vltava+River,+Prague,+Czech+Republic.jpg" />
    	</div>
    </body>
    
    </html>

  • #2
    New Coder
    Join Date
    Sep 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Anyone?

  • #3
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    You've got your container set to 500px max width and your img width to 100% so if you set the vertical height of the image to a value that requires a width > 500px to maintain the original aspect ration then your image will be cut off.

    So either make the width of the container totally flexible or you can load the image into an Image object from which you can access the actual width and height properties of the image. Calculate the original aspect ratio. Then in your code set up a function that calculates the new dimensions of the image, maintaining the original aspect ratio, when you input either a new width or height. If the new width of the image is greater than the max width of the container then set the width of the image to the max width and set the height to the appropriate value for the max width and image's aspect raito.

  • #4
    New Coder
    Join Date
    Sep 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks knightCoder, but I feel there's a lot of wording in your recommendation. How about an example? I guess I have to use JS to set up the function, correct? An example will be much appreciated!

    Quote Originally Posted by knightCoder View Post
    You've got your container set to 500px max width and your img width to 100% so if you set the vertical height of the image to a value that requires a width > 500px to maintain the original aspect ration then your image will be cut off.

    So either make the width of the container totally flexible or you can load the image into an Image object from which you can access the actual width and height properties of the image. Calculate the original aspect ratio. Then in your code set up a function that calculates the new dimensions of the image, maintaining the original aspect ratio, when you input either a new width or height. If the new width of the image is greater than the max width of the container then set the width of the image to the max width and set the height to the appropriate value for the max width and image's aspect raito.


  •  

    Posting Permissions

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