Image Size Css

Discussion in 'CSS' started by anirudh manohar, Feb 5, 2013.

0
  1. #1
    See i have this code for
    Html page
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet"href="style2.css">
    <title>EndOfLine-Recommendation</title…
    </head>
    <body>
    <div id="wrapper">
    <header><img src="logo.png"></header>
    </div>
    </body>
    </html>

    css page
    html
    {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    max-width:100%;
    max-height:100%;
    overflow:auto;
    background-attachment:fixed;
    background-color:black;
    }
    body
    {
    position:relative;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    max-width:100%;
    max-height:100%;
    overflow:auto;
    background-attachment:fixed;
    background-color:black;
    }
    #wrapper
    {
    position:relative;
    height:100%;
    width:100%;
    padding:0;
    margin:0;
    background:url("background.jpeg");
    background-repeat:no-repeat;
    background-color:black;
    max-width:100%;
    max-height:100%;
    overflow:auto;
    background-attachment:fixed;
    }
    header
    {
    position:relative;
    left:25%;
    max-width:100%;
    max-height:20%;
    height:20%;
    }
    header img
    {
    display:block;
    position:relative;
    width:50%;
    height:70%;
    max-height:70%;
    max-width:50%;
    }

    the problem is that when i zoom out in the browser the logo remains of the same size but everything else becomes small but i want that the image also becomes small as i resize.Here is the link to the screenshot image http://postimage.org/image/xg3fbn7s5/ .I am new in css so please help me
    I really appreciate it.
     
    anirudh manohar, Feb 5, 2013 IP
  2. B_Hermelijn

    B_Hermelijn Member

    Messages:
    46
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #2
    Hello anirudh,

    If you're new to CSS/HTML then I suggest you to check out this website:
    http://learncss.tutsplus.com/

    Because right now you really have a lot to learn especially what each code does. And you seems to be using the same syntax's over and over as well. So I do recommend to check out learncss, not only it's easy, the videos are also understandable.

    I hope that helps.


    Cheers!
     
    B_Hermelijn, Feb 6, 2013 IP
  3. dandan17

    dandan17 Active Member

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    @B_Hermelijn thanks for the tip:)
     
    dandan17, Feb 6, 2013 IP
  4. Dangy

    Dangy Well-Known Member

    Messages:
    841
    Likes Received:
    25
    Best Answers:
    2
    Trophy Points:
    155
    #4
    simplest way to fix the problem would be to turn the <img src="logo.png"> into <a class="logo" href="#"></a> and then calling logo.png as the background in css. An then you can remove display:block;
     
    Dangy, Feb 7, 2013 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Uhm... this might be a stupid question, but is this problem specific to firefox?

    There's an optional setting in that browser to rescale just text and nothing else when 'zooming' -- it's an old outdated half-assed scaling technique that truly makes FF behave like the sweetly retarded cousin to Nyetscape 4 that it is. If that is the case, switching to putting the image in the CSS isn't going to fix it, you're stuck with that behavior in FF unless you turn that option OFF... No other browser offers that behavior apart from dynamic font scaling to the system metric -- which is the proper accessibility part of design allowing users (like myself) to not have to dive for the zoom just to get larger text.

    This sounds more like you're reacting to something set in your browser than your code... though that CSS is absolutely rotten given all the default values it seems to be stating for no good reason.
     
    deathshadow, Feb 7, 2013 IP