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 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post

    Auto Resizing Image.

    Hi,


    I have 2 DIVs in my HTML page, one is outerDiv and the other one is innerDiv. I did this to replace <center> which will no longer be supported in HTML5. Anyways, this is not an issue.

    I am creating a slider similar to this one :
    http://www.templatemonster.com/demo/44205.html

    I want the DIV which holds the slider to be 40 or 50% (about, not exactly 50%) height of the browser, ie, I don't want to use the entire space in the browser for the slider. How can I achieve it? Width can be 100% but not the height though.
    I don't want to use too much complicated CSS/JavaScript for this. This is my skeleton of the slider :

    Code:
    <div id="SlideWrapper">
         <div id="SlideContent">
                <img src="images/slider/11.jpg" />
       </div>
    </div>
    How can I achieve it ? Can you please give me some ideas ? Prefer to use percentages and not px in order to avoid hard coding the height/width, but its alright to hard code if there is no other way,


    Thanks in advance,


    Isaac

  • #2
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    Here's a few ideas.



    Responsive Design in 3 Steps

    Flexible, dynamically resizing images with CSS

    dynamically-resize-image
    PHP Code:
    <!DOCTYPE HTML>
    <
    html>
      <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <
    title>Dynamically resize image</title>
        <
    script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style>
          html, body {
            margin: 0;
            padding: 0;
            height: 100%;
          }
          
          #container{
            height: 100%;
            width:80%;
            overflow:hidden;
            margin: 0 auto;
          }
        </style>
      </head>
      
      <body>
        <div id="container"><img src="contact.jpg" id="image"></div>
        <script>
          $(window).load(function() {
            function resizeImage(){
              img.css('height', el.height());
            }
            
            $(window).resize(function() {
              resizeImage();
            });
            
            var el = $("#container");
            var img = $("#image");
            resizeImage();
          });
        </script>
      </body>
    </html> 
    Last edited by student101; 10-17-2013 at 07:30 AM. Reason: more code
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:


  •  

    Tags for this Thread

    Posting Permissions

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