如何确保Bootstrap中图片在容器边界内正常显示？

Hey there! Let's get that mobile image overflow issue sorted out for you. I took a look at your code and spotted a few key things causing the problem, plus some quick fixes to get your site looking right on all devices.

What's Causing the Overflow? #

The main culprit is your images have fixed pixel dimensions (width:800px; height:600px;) inline. On mobile screens way smaller than 800px, these images don't shrink to fit their container—they just spill over the edges. Also, there are some messy HTML structure issues and unused/conflicting CSS styles that are making things worse.

Step-by-Step Fixes #

1. Clean Up Your HTML First #

Your HTML has a few errors that can throw off layout:

• Duplicate <meta> tags and a misplaced <body> tag (they should all live in the <head> section)
• An unclosed <li> tag for the "About" link
• Extra nested divs in your navbar that aren't needed

Here's the cleaned-up HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <nav class="navbar navbar-fixed no-padding" role="navigation">
        <div class="container-fluid">
            <div class="jumbotron">
                <div class="navbar-header">
                    <div class="row-fluid">
                        <div class="span2 offset2"><br><br><br></div>
                        <div class="span5"><h4 class="title1">Marvelous Grass Trees for Sale in Melbourne</h4></div>
                    </div>
                </div>
                <ul class="nav">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li class="active"><a href="about.html">About</a></li>
                    <li class="active"><a href="prices.html">Prices</a></li>
                    <li class="active"><a href="contact.html">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <br>
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="imgAbt">
                    <img src="Tree1.jpg" />
                </div>
            </div>
            <div class="col-md-4">
                <br>
                <h1 class="header" style="padding-left:30px">About Me</h1>
                <p class="text" style="padding-left:30px">Grass Trees are a protected species ...</p>
            </div>
        </div>
    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <div class="container">
        <h1 class="header">About Me</h1>
        <div class="row">
            <div class="col-md-4">
                <div class="imgAbt">
                    <img src="Tree2.jpg" />
                </div>
            </div>
            <div class="col-md-8">
                <p class="text">Our aim is to make these iconic plants...</p>
            </div>
        </div>
    </div>

    <br><br><br><br><br><br><br><br><br><br>

    <footer>
        <div class="social">
            <p class="text">You can also connect with us anytime on <a href="https://www.facebook.com/[page link to be created]">Facebook</a> to receive our latest news and special discounts available exclusively all our followers</p>
        </div>
        <div class="footer1">&copy; 2018 Grass Trees</div>
    </footer>
</body>
</html>

2. Update CSS to Fix Image Overflow #

Now let's adjust the CSS to make images responsive, and clean up styles that were causing layout issues:

html { 
    overflow-x:hidden; 
} 

.jumbotron { 
    background-color: #f5a600; 
    padding-top: 13px; 
    margin: 0; /* Removed negative margins that caused hidden horizontal overflow */
} 

.navbar-fixed { 
    width: 100%; 
    text-align: center; 
    margin-top: -7px; 
} 

.no-padding { 
    padding-left: 0; 
    padding-right: 0; 
} 

.title1 { 
    color: #467340; 
} 

.active { 
    font-size: 35px; 
    text-align: center; 
    display: inline; 
    list-style-type: none; 
    margin-left: 2%; 
    margin-right: 5%; 
} 

.nav li.active a { 
    color: #096445; 
} 

.test { 
    text-align: center; 
    font-family: 'Open Sans'; 
    font-size: 40px; 
    color: #0d865d; 
} 

.test1 { 
    text-align: center; 
    font-size: 15px; 
    color: #668B8B; 
} 

.cta { 
    font-size: 20px; 
} 

.bodytext { 
    text-align: center; 
} 

.social { 
    text-align: center; 
} 

.footer1 { 
    text-align: center; 
    font-family: 'Open Sans'; 
    font-size: 10px; 
    color: #000000; 
    letter-spacing: 2px; 
} 

.iframe-container{ 
    position: relative; 
    width: 100%; 
    padding-bottom: 56.25%; /* Ratio 16:9 */
} 

.iframe-container > *{ 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: 0; 
}

/* Add these styles to make images responsive */
.imgAbt img {
    max-width: 100%; /* Image will never be wider than its container */
    height: auto; /* Keep aspect ratio intact */
    float: right; /* Keep your original float for desktop */
    margin-right: 10px;
}

/* Adjust float for mobile if needed */
@media (max-width: 768px) {
    .imgAbt img {
        float: none;
        margin: 0 auto 15px;
        display: block;
    }
}

Key Changes Explained #

• Removed fixed image dimensions: Using max-width:100% ensures images shrink to fit their container on small screens, while height:auto keeps the image from getting stretched out of shape.
• Cleaned up navbar styles: Removed negative margins on .jumbotron that were causing hidden horizontal overflow.
• Added a media query: Optional, but makes images stack nicely on mobile instead of floating, which improves readability for small-screen users.
• Fixed HTML errors: Closed tags, removed duplicates, and simplified nested divs to prevent unexpected layout conflicts.

This should get your images behaving correctly on mobile without spilling over the navbar. Once you're done fixing this, you can dive into learning Bootstrap best practices and clean CSS—you're already off to a great start!

内容的提问来源于stack exchange，提问作者KeenNewCoder