CODEWITHSUNDEEP
htmlcssresponsive-design
Rizwan Chaudry
Rizwan Chaudry

Reputation: 179

Responsive Design - Images not fitting viewport size height wise

Hello I am new to responsive design and I have been recently working on a portfolio website where I have been trying to make it responsive at all the given sizes presented in the Mozilla responsive design developer view tool.

As I shrink the view port to go down to the smaller sizes the height of my images no longer fit the height of the view port, this can be especially seen at view port size 320px. Is this an issue with my media queries or a general flaw with my HTML structure? or CSS? Could this be an issue with the size of my images? This has derailed my progress with the other aspects of my website any help with this would be greatly appreciated.

HTML

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script type="text/javascript" src="typewriterscript.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
        <div id="wrapper">
            <header>
                <img src="Header2.png" />
            </header>
            <div id="main-content">
                <img src="Aboutme2.png" />
                <div id="about-me"></div>
            </div>
            <div class="push"></div>
        </div>
        <footer>
            <img src="Footer2.png" />
        </footer>
    </body>
    <!--<script LANGUAGE="javascript">
        startTyping(text, 50, "about-me");
    </script>-->

</html>

CSS 

html, body {
    height: 100%;
    margin: 0;
    background-color: #2576bc;
}
#wrapper {
    width: 100%;
    min-height: 100%;
    margin: 0 auto -81px;
}
header {
    width: 800px;
    height: 244px;
    border: solid 4px black;
    margin: 0px auto;
}
#main-content {
    width: 800px;
    height: 500px;
    border: solid 4px black;
    margin: 0px auto;
}
/*#about-me {
    position: absolute;
    width: 436px;
    height: 200px;
    background-color: #2576bc;
    border: solid 3px black;
    margin: -450px 180px;
}*/
footer, .push {
    height: 81px;
}
footer {
    width: 800px;
    border: solid 4px black;
    margin: 0px auto;
}
header img {
    width:100%;
    height:auto;
}
footer img {
    width:100%;
    height: auto;
}
#main-content img {
    width:100%;
    height:auto;
}

Media Queries

/*Responsive CSS*/
 @media screen and (max-width:959px) {
    #wrapper {
        width: 100%;
    }
    header {
        width: 100%;
    }
    #main-content {
        width: 100%;
    }
    footer {
        width: 100%;
    }
    .push {
        width: 100%;
    }
}
@media screen and (max-width:640px) {
    #wrapper {
        width: 100%;
    }
    header {
        width: 100%;
    }
    #main-content {
        width: 100%;
    }
    footer {
        width: 100%;
    }
    .push {
        width: 100%;
    }
}
@media screen and (max-width:320px) {
    #wrapper {
        width: 320px;
    }
    footer {
        width: 320px;
    }
}

Upvotes: 0

Views: 978

Answers (3)

thosetinydreams
thosetinydreams

Reputation: 1000

The images are behaving like this, because the DIVs (and other elements—header, footer) they're enclosed in have a set height. Since the images are set to width: 100%, they will always fill the enclosing DIV in their width entirely. However, their height is set to auto, which means they will keep the original aspect ratio.

If you want the images to fill the DIV both height- and width-wise, don't set the height of the enclosing elements (that way the DIV will stretch around the images as needed).

Upvotes: 1

Billy_Bob
Billy_Bob

Reputation: 85

Your images are responsive. If you try IE, Moz and Chrome you will see that they all perform a little differently as you shrink your window. That difference is hard coded and nothing that I'm aware of can change that.

However, you might see if placing this first, in your CSS, doesn't help:

*, *:before, *:after {
        box-sizing: border-box;
 }

Upvotes: 0

Steven Leimberg
Steven Leimberg

Reputation: 785

Try this. You should use max-width on your #wrapper, and don't set manual heights on your div's. You don't need the media queries for this unless you want special styles for certain screen sizes. 

html, body {
    height: 100%;
    margin: 0;
    background-color: #2576bc;
}
#wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
header {
    border: solid 4px black;
    margin: 0;
}
#main-content {
    border: solid 4px black;
    margin: 0;
}
/*#about-me {
    position: absolute;
    width: 436px;
    height: 200px;
    background-color: #2576bc;
    border: solid 3px black;
    margin: -450px 180px;
}*/
footer {
    border: solid 4px black;
    margin: 0;
}
header img {
    width:100%;
}
footer img {
    width:100%;
}
#main-content img {
    width:100%;
}
<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script type="text/javascript" src="typewriterscript.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
        <div id="wrapper">
            <header>
                <img src="Header2.png" />
            </header>
            <div id="main-content">
                <img src="Aboutme2.png" />
                <div id="about-me"></div>
            </div>
            <div class="push"></div>
        </div>
        <footer>
            <img src="Footer2.png" />
        </footer>
    </body>
    <!--<script LANGUAGE="javascript">
        startTyping(text, 50, "about-me");
    </script>-->

</html>

Upvotes: 0

Related Questions