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

【问题标题】：Image overflow out of container on mobile screens移动屏幕上的图像溢出容器
【发布时间】：2014-05-14 17:23:11
【问题描述】：

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

图片

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="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;
}


    }

简单的网格 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;
    }
}

【问题讨论】：

    标签： html css grid overflow containers


    【解决方案1】：

    尝试将其添加到您的 css 中

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

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

    【讨论】：

    • 非常简单的修复。不敢相信我一开始没想到。谢谢
    【解决方案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 
  */
}

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-02-21
      • 1970-01-01
      • 1970-01-01
      • 2014-06-04
      • 1970-01-01
      • 2020-06-12
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode