www.webdeveloper.com
Results 1 to 13 of 13

Thread: I want resize an element by percentage only after a certain window size

  1. #1
    Join Date
    Jan 2013
    Posts
    84

    Question I want resize an element by percentage only after a certain window size

    Hi
    I've an html with a fluid layout. I placed and image on the left and i want that it assumes 600px of width in case the browser window size is more than 980px. Below this size i want that the image is scaled in percentage. For do that is necessary use javascript and modify dinamically the css property?

  2. #2
    Join Date
    Aug 2006
    Posts
    1,917
    600px is approx 61% of 980px, so assuming the parent of the image is the full browser width, you could do:
    Code:
    img {width:61%;max-width:600px}
    Dave

  3. #3
    Join Date
    Jan 2013
    Posts
    84
    i've done some proof but mine is a particoular case and your solution cause some overlaps.
    I've no problem to use JS, could i use it or for performance question is better use only css ?

  4. #4
    Join Date
    Aug 2006
    Posts
    1,917
    I suppose you can use JS. It would be slower, but negligible. I'd worry more about what happens if someone doesn't have JS in their browser. But if you want to use JS, go right ahead.

    Dave

  5. #5
    Join Date
    Mar 2011
    Posts
    1,144
    It's easy to do this in your stylesheet with a media query:
    Code:
    #myImg { width:600px; }
    
    @media screen and (max-width:600px) {
    #myImg { width:70%; }
    }
    Rick Trethewey
    Rainbo Design

  6. #6
    Join Date
    Jan 2013
    Posts
    84
    Quote Originally Posted by tracknut View Post
    I suppose you can use JS. It would be slower, but negligible. I'd worry more about what happens if someone doesn't have JS in their browser. But if you want to use JS, go right ahead.

    Dave
    There are so many browser that don't use JS? (really i asking, i dont know) Even facebook use JS, and anyway my site use JS for many other things such ajax requests... If JS in poorely supporte, so, i failed to project it

  7. #7
    Join Date
    May 2013
    Location
    Surendranagar Gujarat India
    Posts
    55
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=UTF-8>
    <title>Proportional resizing</title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }

    html, body {
    height: 100%;
    overflow: hidden;
    }

    div {
    position: absolute;
    left: 30%;
    top: 20%;
    width: 40%;
    height: 30%;
    background-color: #ddd;
    }
    </style>
    </head>
    <body>
    <div>divthing</div>
    </body>
    </html>


    Kishor Makwana
    Software Engineer
    Insight Softech
    www.insightsoftech.com

  8. #8
    Join Date
    Mar 2011
    Posts
    1,144
    I made a mistake in my earlier post and apparently didn't include enough code for the idea to be clear. Try:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="charset" content="utf-8">
    <title>Responsive Image Size</title>
    <style>
    #myImg { width:600px; }
    
    @media screen and (max-width:980px) {
    #myImg { width:61%; }
    }
    </style>
    </head>
    <body>
    <img id="myImg" src="someImage.jpg">
    </body>
    </html>
    600/980 = .612, which is why I chose the 61%. It should give good results.
    Rick Trethewey
    Rainbo Design

  9. #9
    Join Date
    Aug 2006
    Posts
    1,917
    Quote Originally Posted by American horizo View Post
    There are so many browser that don't use JS? (really i asking, i dont know) Even facebook use JS, and anyway my site use JS for many other things such ajax requests... If JS in poorely supporte, so, i failed to project it
    Personally, I try to make my sites "work" without JS, and have JS make them "even better". But if you've already passed that point with your existing JS, then of course there isn't much need to change now for this one thing.

    Dave

  10. #10
    Join Date
    Jan 2013
    Posts
    84
    however facebook and other important sites requires js else dont work

  11. #11
    Join Date
    Jun 2013
    Posts
    3
    I think this would be It would be slower, but negligible. I'd worry more about what happens if someone doesn't have JS in their browser. But if you want to use JS, go right ahead.

  12. #12
    Join Date
    Apr 2013
    Posts
    26
    you can try some imaging sdk which is ubiquitous on the internet to resize image.

  13. #13
    Join Date
    Sep 2013
    Posts
    221
    The below example is just to set the height and width of <html> and <body> to 100%, overflow to hidden and use percentages for left, top, width and height of elements:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=UTF-8>
    <title>Proportional resizing</title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }

    html, body {
    height: 100%;
    overflow: hidden;
    }

    div {
    position: absolute;
    left: 30%;
    top: 20%;
    width: 40%;
    height: 30%;
    background-color: #ddd;
    }
    </style>
    </head>
    <body>
    <div>divthing</div>
    </body>
    </html>

    Hope this helps you

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles