Image overflow out of container on mobile screens

StackOverflow https://stackoverflow.com/questions/23661203

Question

I am using the Simple Grid CSS system for my webpage and I'm running into an issue where one of my images overextends the container only on the right side of the screen on small devices. Currently I hid the overflow, but it is not a good hack because it cuts off part of my image. See image for what I mean.

Image Web Page on Small Screen

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>TEST</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="simplegrid.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <link type="text/javascript" src="navicon.js">
    </head>
<body>

    <div class="navigation-wrapper">
    <!-- Start Navigation Grid -->
        <div class="grid" id="nav-wrapper-grid">
            <!-- Start Columns -->
            <div class="col-1-1">
            <!-- Start Navigation Wrapper -->
            <nav id="nav-wrapper">
                <div id="links">
                    <a href="index.html" id="nav-logo"><img src="images/d.png" /></a>
                    <ul id="nav">
                        <li><a href="bars.html">Test</a></li>
                        <li><a href="#">BLOG</a></li>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="#">Test</a></li>
                    </ul>
                </div>
            </nav>
            <!-- End Navigation Wrapper -->
            </div>
            <!-- End Columns -->
        </div>
        <!-- End Navigation Grid -->
    </div>

    <!-- Start Mission Statement Grid -->

    <div class="grid">
        <div class="col-1-1" id="bars-label">
            <h1>Test</h1>
        </div>
    </div>

    <div class="grid" id="bars-grid">
        <div class="col-3-12">
            <div id="bar-thumbnail">
                <img src="images/zen.png">
                <h3><span>Test</span></h3>
            </div>
        </div>
        <div class="col-9-12">
           <div id="bar-detail">
                <h3>Test Name</h3>
                <p>123 Fake Street</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in ullamcorper velit. Curabitur commodo pretium dui, et accumsan felis egestas at. Donec feugiat orci justo, quis eleifend sem ornare ac. Aenean volutpat at tellus eget viverra. Sed rutrum ut elit sed consequat. Sed consectetur tincidunt quam, vel vestibulum neque tempus et. Nam aliquet, felis a vulputate pharetra, enim sem suscipit nibh, vitae euismod urna est non sem. Integer in venenatis ante. </p>
            </div>
        </div>
    </div>
</div>
    <!-- End Mission Statement Grid -->

    <!-- Start Bars Grid -->

    <div class="grid" id="bars-grid">
        <!-- Start Bar Thumbnail -->
        <div class="col-3-12">
            <div id="bar-thumbnail">
                <img src="images/zen.png" />
                <h3><span>Test</span></h3>
            </div>
        </div>
        <!-- End Bar Thumbnail -->

        <!-- Start Bar Detail -->
        <div class="col-9-12">
            <div id="bar-detail">
                <h3>Test Name</h3>
                <p>123 Fake Street</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in ullamcorper velit. Curabitur commodo pretium dui, et accumsan felis egestas at. Donec feugiat orci justo, quis eleifend sem ornare ac. Aenean volutpat at tellus eget viverra. Sed rutrum ut elit sed consequat. Sed consectetur tincidunt quam, vel vestibulum neque tempus et. Nam aliquet, felis a vulputate pharetra, enim sem suscipit nibh, vitae euismod urna est non sem. Integer in venenatis ante. </p>
            </div>
        </div>
    </div>

    <!-- End Bars Grid -->


        <script type="text/javascript">$("#nav").addClass("js").before('<div id="menu">&#9776;</div>');
    $("#menu").click(function(){
        $("#nav").slideToggle();
    });
    $(window).resize(function(){
        if(window.innerWidth > 768) {
            $("#nav").removeAttr("style");
        }
    });</script>

</body>
</html>

CSS (image is in div id="bar-thumbnail):

html, body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    overflow-x: hidden;
    font-family: 'HouschkaAlt', Fallback, sans-serif;
}

@font-face {
        font-family: 'HouschkaAlt';
        src: url('fonts/FontName.eot');
        src: url('fonts/FontName.eot?iefix') format('eot'),
             url('fonts/FontName.woff') format('woff'),
             url('fonts/HouschkaAlt-Medium.ttc') format('truetype');
        font-weight: normal;
        font-style: normal; }

#nav-logo img {
    width: 150px;
    height: 40px;
}





/*      NAVIGATION LINKS         */

#nav li a {
        display: block;
        width:100%;
        background:#fff;
        color: #3d6c46;
        font-size: 15px;
        line-height: 40px;
        text-decoration: none;
        margin-top: 5px;
        padding-left: 20px;
    }


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {



    #nav-wrapper-grid {
    background-color: #fff;
    overflow: hidden;
    width: 100%;
    left:0;
    z-index: 100;
    }



    #links {
            width: 960px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 20px;
        }


    #nav-logo {
           float: left;
           display: inline;
        }

    ul {
        width:100%;
        background-color: #fff;
        height: 40px;
        padding: 0;
        display: inline;
        }

    li {
        padding: 0 20px;
        float: left;
        list-style-type: none;
        } 

    #menu {
            display: none;
        }   

    /*---- index.html ----*/    

    .mission-statement-wrapper {
    background-image: url('images/downtownblur.jpg')!important;  
    }

    #body-wrapper-grid {
        background-color:transparent!important;
    }   

    #iphone-mockup img {
        vertical-align: bottom;
        margin: 0 auto;     
    }


    #mission-statement {
        text-align: left;
        background-color: #fff;
        color: #3d6c46;
        margin: 0px;
        padding: 10px;
        float: right;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px; /* future proofing */
    }


    #main-logo img {
        display: block;
        margin: auto;
    }

    /*      APP STORE BADGE         */

#app-store-badge img {
    display: block;
    margin-right:  auto;
    margin-left: auto;
    width: 200px;
    height: 50px;
    padding-bottom: 10px;
}

.features-detail-wrapper {
    background-color: #fff!important;
}

#features-detail-grid {

    background-color:transparent!important;
}


    #features-detail-grid h3 {
        text-align: center;
        background-color: #fff;
        color: #3d6c46;
        font-weight: bold;
        margin-bottom: 0;
        padding-bottom: 5px;
        border-bottom:  1px solid #3d6c46;

    }

    #features-detail-grid img {
        display: block;
        margin-right: auto;
        margin-left: auto;
        padding-top: 10px;

    }

    #features-detail-grid p {
        text-align: center;
        background-color: #eee;
        color: #3d6c46;
        font-weight: bold;
        margin-top: 0;
        padding-top: 10px;
        padding: 5px;
    }


    #footer-content p {
        text-align: center;
    }


/*---- Bars.html ----*/


#bars-label {
    color: #3d6c46;
    padding: 10px;
}

#bars-grid {

    margin-top: 20px;
}


#bar-thumbnail {
    position: relative;
    width: 100%;
}

#bar-thumbnail img {

    height: 100%;
    width: 100%;
}

#bar-thumbnail h3 {
    display: block;
    position: absolute;
    width:100%;
    text-align: center;
    color: #fff;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    padding: 0;
    margin: 0;

}


#bar-detail {
    width: 100%;
    background-color: #eee;
    padding: 0;
}

#bar-detail h3 {
    color: #3d6c46;
    margin-top: 0;
    margin-left: 10px;
}

#bar-detail p {
    color: #5d5c5c;
    margin-left: 10px;
    padding-bottom: 10px;
}

/*---- barsDetail.html ----*/



#bar-information-grid {
    background-color: #eee;
    max-height: 217px;
    margin-top: 20px;
}



#bar-logo img {
    width: 100%;
    height: 100%;
    margin: 0;
    vertical-align: bottom;
}

#bar-information-detail {
    position: relative;
    top: 0;
}

#bar-phone-number {
    background: url(images/phone.png) 10px no-repeat;
    position: absolute;
    background-color: #3d6c46;
    width: 145px;
    height: 40px;
    top: 0;
    right: 25px;
}

#bar-phone-number p {
    color: #fff;
    float: left;
    line-height: 13px;
    margin-left: 30px;
}

#bar-information-detail h1 {
    padding-left: 10px;
    font-size: 1.17em;
}

#bar-information-detail p {
    font-size: 0.8em;
    padding: 0 10px 0 10px;
    margin-bottom: 0;e
}

#bar-social-media ul {
    width:100%;
        background-color: #eee;
        display: block;
        margin-top: 10px;
}

#bar-social-media li {

        padding: 0 10px;
        list-style-type: none;


}

#bar-social-media img {
    background-color: #eee;
    position: relative;
    width: 15px;
    height: 15px;
    top: 17px;
    margin-right: 20px;
    vertical-align: bottom;
    float: left;
}

#bar-social-media p {
    padding: 0;
    float: left;
}


#specials-label-wrapper h2 {
    background-color: #3d6c46;
    color: #fff;
    padding: 5px;
}

#drink-specials-wrapper h3 {
    text-align: center;
    background-color: #000;
    color: #fff;
    padding: 10px;
}

#specials-detail {
    background-color: #eee;

}

#specials-detail p {
    color: #000;
    padding: 10px;

}


/*---- about.html ----*/

.about-us-labels h1, h2 {
    color: #3d6c46;
}

.about-us-info {
    padding: 10px;
}

.about-us-info h2 {
    text-align: center;
}

.about-us-info img {
    display: block;
    margin: 0 auto;
    width: 210px;
    height: 300px;
}

.about-us-info p {
    background-color: #eee;
    padding: 10px;

}

}




/* Navigtion for Small Devices */
@media screen and (max-width: 768px) {

/*---- NAVIGATION ----*/

    #nav-wrapper-grid {
    background-color: #fff;
    overflow: hidden;
    width: 100%;
    left:0;
    z-index: 100;
    }

    #menu {
            width:1.4em;
            display: block;
            background:#fff;
            font-size:1.35em;
            text-align: center;
            color: #678B6C;
            float: right;
            top:0;

        }

    #logo {
            float: none;

        }

    #nav.js {
            display: none;
            padding: 0;
        }

    #links ul {
            width:100%;
            list-style:none;
            height: auto;
        }

    #links li {
            width:100%;
            border-right:none;
            border-top: 1px solid #678B6C; 
        }


/*---- index.html ----*/

        .mission-statement-wrapper {
    background-image: url('images/downtownblur.jpg')!important;  
    }

    #mission-statement p {
        color: #3d6c46;
    }

    #body-wrapper-grid {

    }

    #mission-statement {
        background-color: #fff;
        margin-top: 0;
        margin-bottom: 0px;
    }

    #iphone-mockup {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    #iphone-mockup img {
        vertical-align: bottom;
        height: 350px;
        width: 400px;
        margin-bottom: 0;

    }

    #main-logo img {
        display: block;
        width: 250px;
        height: 75px;
        margin: 0 auto;
    }

    #mission-statement p {
        text-align: center;
    }

    #app-store-badge img {
        display: block;
        margin: 0 auto;

    }

    #features-detail-grid p {
        text-align: center;
        background-color: #eee;
        color: #3d6c46;
        font-weight: bold;
        margin-top: 0;
        padding-top: 10px;
        padding: 5px;
    }


    #features-content h3 {
        text-align: center;
        color: #3d6c46;
        font-weight: bold;
        padding-bottom: 5px;
        border-bottom:  1px solid #3d6c46;
    }

    #features-content p {
        text-align: center;
    }

    #features-content img {
        display: block;
        margin: 0 auto;
    }

    /*---- bars.html -----*/

    #bars-label {
    color: #3d6c46;
}


    #bar-thumbnail {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

    #bar-thumbnail img {
        display: block;
        margin: 0 auto;
    }




#bar-thumbnail h3 {
    display: block;
    position: absolute;
    width:100%;
    text-align: center;
    color: #fff;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    padding: 0;
    margin: 0;

}


#bar-detail {

    background-color: #eee;
    padding: 10px;
    margin-right: 20px;
}

#bar-detail h3 {
    color: #3d6c46;
    margin-top: 0;
    margin-left: 10px;
}

#bar-detail p {
    color: #5d5c5c;
    margin-left: 10px;
    padding-bottom: 10px;

}

/*---- barsDetail.html ----*/



#bar-information-grid {
    background-color: #eee;
    margin-top: 20px;
}



#bar-logo img {
    width: 100%;
    height: 100%;
    margin: 0;
    vertical-align: bottom;
}


#bar-phone-number {
    background: url(images/phone.png) 10px no-repeat;
    float: right;
    background-color: #3d6c46;
    width: 145px;
    height: 40px;
    top: 10px;
    right: 20px;
    margin-right: 20px;
}

#bar-phone-number p {
    color: #fff;
    float: left;
    line-height: 13px;
    margin-left: 30px;
}

#bar-information-detail h1 {
    font-size: 1.17em;
    float: left;
}

#bar-information-detail p {
    clear: both;
    font-size: 0.8em;
}

#bar-social-media ul {
    margin-left: 40px;
    padding: 0;
}

#bar-social-media li {
        padding: 0 10px 0 10px;
        list-style-type: none;
}

#bar-social-media p {
    padding-right: 10px;
}

#bar-social-media img {
    background-color: #eee;
    position: relative;
    width: 15px;
    height: 15px;
    top: 17px;
    margin-right: 10px;
    margin-left: 10px;
    vertical-align: bottom;
    float: left;
}

#bar-social-media p {
    padding: 0;
    float: left;
}

#daily-label {
    background-color: #3d6c46;
}

#specials-label-wrapper h2 {
    background-color: #3d6c46;
    color: #fff;
    width: 100%;
    padding: 5px;
}

#drink-specials-wrapper h3 {
    text-align: center;
    background-color: #000;
    color: #fff;
    padding: 10px;
}


#specials-detail p {
    color: #000;
    padding: 10px;
    margin-right: 20px;
    background-color: #eee;

}

/*---- about.html ----*/

.about-us-labels h1, h2 {
    color: #3d6c46;
}

.about-us-info {
    padding: 10px;
}

.about-us-info h2 {
    text-align: center;
}

.about-us-info img {
    display: block;
    margin: 0 auto;
    width: 210px;
    height: 300px;
}

.about-us-info p {
    background-color: #eee;
    padding: 10px;
    margin-right: 20px;
}


    }

Simple Grid CSS:

/*
  Simple Grid
  Learn More - http://dallasbass.com/simple-grid-a-lightweight-responsive-css-grid/
  Project Page - http://thisisdallas.github.com/Simple-Grid/
  Author - Dallas Bass
  Site - dallasbass.com
*/

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

body {
    margin: 0px;
}

[class*='col-'] {
    float: left;
    padding-right: 20px;
}

[class*='col-']:last-of-type {
    padding-right: 0px;
}

.grid {
    width: 100%;
    max-width: 1140px;
    min-width: 755px;
    margin: 0 auto;
    overflow: hidden;
}

.grid:after {
    content: "";
    display: table;
    clear: both;
}

.grid-pad {
    padding: 20px 0 0px 20px;
}

.grid-pad > [class*='col-']:last-of-type {
    padding-right: 20px;
}

.push-right {
    float: right;
}

/* Content Columns */

.col-1-1 {
    width: 100%;
}
.col-2-3, .col-8-12 {
    width: 66.66%;
}

.col-1-2, .col-6-12 {
    width: 50%;
}

.col-1-3, .col-4-12 {
    width: 33.33%;
}

.col-1-4, .col-3-12 {
    width: 25%;
}

.col-1-5 {
    width: 20%;
}

.col-1-6, .col-2-12 {
    width: 16.667%;
}

.col-1-7 {
    width: 14.28%;
}

.col-1-8 {
    width: 12.5%;
}

.col-1-9 {
    width: 11.1%;
}

.col-1-10 {
    width: 10%;
}

.col-1-11 {
    width: 9.09%;
}

.col-1-12 {
    width: 8.33%
}

/* Layout Columns */

.col-11-12 {
    width: 91.66%
}

.col-10-12 {
    width: 83.333%;
}

.col-9-12 {
    width: 75%;
}

.col-5-12 {
    width: 41.66%;
}

.col-7-12 {
    width: 58.33%
}

@media handheld, only screen and (max-width: 767px) {


    .grid {
        width: 100%;
        min-width: 0;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }

    [class*='col-'] {
        width: auto;
        float: none;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
Était-ce utile?

La solution

Try adding this to your css

img {
 max-width:100%;
 width:100%;
}

This will make sure the image is only as wide as its parent, it will keep the image proportions too so no need to specify a height value.

Autres conseils

Setting the overflow to hidden is a-ok. To dynamically resize the image, try this:

div#bar-thumbnail img {
  width: 100%;

  /* 
     consider adding a max-width here, as well, 
     as to not over-stretch your image on larger, 
     high-res devices which would make it appear blurry 
  */
}

Set your image width to 100% (or less) of the parent container to scale the image to any device size in your CSS file. Example:

img {
    width: 100%;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top