确保响应式图片与Div类高度一致的技术求助

Hey there! Let's work through this issue where your image container and hero section aren't matching heights in a responsive layout. Here are some practical, reliable solutions tailored to your Bootstrap 3 setup:

1. Use Flexbox to Make Columns Equal Height #

The core problem here is that Bootstrap 3 uses float-based layouts by default, which don't automatically make columns in a row equal height. Flexbox fixes this easily. Add this custom CSS to your styles:

/* Equal height row for Bootstrap 3 */
.row.equal-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap; /* Preserve responsive wrapping */
}

/* Revert to block layout on small screens if needed */
@media (max-width: 767px) {
  .row.equal-height {
    display: block;
  }
}

Then update your row in the HTML to use this class:

<div class = "row equal-height">

This will force both the image column and text column to match each other's height, ensuring the hero section wraps tightly around the tallest content (which should be your image in most cases).

2. Remove Fixed Height from Hero Section #

Your .hero-section has height: 64%, which is likely causing unexpected behavior because percentage heights rely on the parent element having a defined height. Instead, let the content determine the height naturally:

.hero-section { 
  background-color: white; 
  font-family: Oswald; 
  letter-spacing: 4px; 
  top: 0; 
  /* Remove fixed height */
  width: auto; 
  padding-top: 5%; 
  padding-bottom: 1%; 
}

If you need a minimum height for the section, use min-height: [value] instead (e.g., min-height: 400px) to maintain responsiveness.

3. Clean Up Image and Text Styles #

• The <img> tag is self-closing in HTML, so remove the unnecessary </img> closing tag:

  <img src = "images/devin-townsend-evermore.jpg" class="responsive">
  

• The .responsive class on your h1 and h2 is redundant (block-level elements like headings already default to width: 100% and height: auto). You can remove those to simplify your code.
• Adjust the padding-left on your text for smaller screens to avoid overflow. Add a media query:

  @media (max-width: 767px) {
    #hero-section h1, #hero-section h2 {
      padding-left: 0 !important;
      text-align: center; /* Optional: Center text on mobile */
    }
  }
  

4. Verify Image Container Behavior #

Since your image has width: 100%; height: auto;, it will automatically scale to fit its column and maintain aspect ratio. The flex row we added ensures the text column matches this height, so the hero section will always wrap perfectly around the image and text.

These changes should resolve the height mismatch while keeping everything fully responsive. Test across different screen sizes to make sure the layout behaves as expected!

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