Question

我正在为我的网页使用Simple Grid CSS系统，并且我遇到了一个问题，其中我的一个图像仅在小型设备上的屏幕右侧过度扩展容器。目前我隐藏了溢出，但它不是一个好的黑客，因为它切断了我的部分图像。看看我的意思。

图片 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（图片在div id =＆＃34; 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;
    }
}

Answer 1

尝试将此添加到您的css

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

这将确保图像仅与其父图像一样宽，它将保持图像比例，因此无需指定高度值。

Answer 2

将溢出设置为隐藏是好的。要动态调整图片大小，请尝试：

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 
  */
}

移动屏幕上的图像溢出容器

2 个答案: