Bootstrap响应式网站图片适配问题：求简洁解决方法

Hey there! Let's work through this responsive image issue you're dealing with—no need for that clunky jQuery code you've been testing, and we can get those images fitting their containers properly in no time.

First, let's break down the core problems you're facing:

• Images overflowing their div containers when screen sizes change
• Manual jQuery image switching that requires separate code for every breakpoint (plus it doesn't handle window resizing automatically)

Step 1: Fix the Image Container Fit Issue #

First, double-check your Bootstrap version to make sure you're using the right responsive image class:

• If you're on Bootstrap 4 or newer, replace img-responsive with img-fluid (the old img-responsive class was deprecated in v4). This class applies max-width: 100%; height: auto; by default, which guarantees images never exceed their parent container's width.
• If you're stuck on Bootstrap 3, img-responsive should work, but add this CSS to your .img-wrapper to eliminate any conflicting styles:

.img-wrapper {
  width: 100%;
  margin: 0 auto;
  /* Remove any fixed width or overflow: visible styles here */
}

Step 2: Simplify Responsive Image Switching (No jQuery Needed!) #

Instead of writing custom JS to swap images at breakpoints, use the native HTML <picture> element—it's built for exactly this scenario, and browsers handle the switching automatically.

Replace your existing image blocks with this cleaner structure:

For Women's Shirts:

<div class="img-wrapper" id='women-shirts'>
  <picture>
    <!-- Load mobile image when screen is <798px -->
    <source media="(max-width: 797px)" srcset="img/womens-t-shirts-mobile.png">
    <!-- Default to desktop image for larger screens -->
    <img class="img-fluid" src="img/womens-t-shirts.png" alt="womens shirts">
  </picture>
</div>

For Women's Pants:

<div class="img-wrapper" id='women-pants'>
  <picture>
    <source media="(max-width: 797px)" srcset="img/womens-pants-mobile.jpg">
    <img class="img-fluid" src="img/womens-pants.jpg" alt="womens pants">
  </picture>
</div>

Why This Works Better Than Your jQuery Approach: #

• No JS dependency: Browsers natively support <picture>, so you don't have to worry about jQuery loading issues or writing resize event listeners.
• Automatic adaptation: It works on window resize, not just initial page load.
• Cleaner code: No emptying/appending elements—just declarative HTML that's way easier to maintain.

Quick Troubleshooting Tips #

• If images still overflow, check if any parent elements (like .imagerow or .imagegallery) have fixed widths or overflow: visible set.
• Double-check that your image paths are correct across all breakpoints.

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