如何实现内嵌文字的可缩放横幅？已尝试方案存缺陷

Hey there! Let's fix this scalable banner with embedded text issue you're stuck on. First, let's recap the core problems with your previous attempts:

• Using an <img> tag works for scaling, but you can't nest text directly inside it since it's a self-closing element
• Setting background-image without proper sizing rules leaves the image stuck at its original dimensions
• Fixing the height to 400px breaks the banner's aspect ratio on smaller screens

Here's a solid solution that checks all your boxes: a container div that holds both the scalable background image and your embedded text.

Full Code Example #

HTML #

<div class="banner">
  <div class="banner-content">
    <h2>Your Banner Title Here</h2>
    <p>Add any descriptive text or buttons right here!</p>
  </div>
</div>

CSS #

.banner {
  /* Set your background image */
  background: url("../img/banner.jpg") no-repeat center center;
  /* Make the image scale to cover the entire container without stretching */
  background-size: cover;
  /* Maintain the original aspect ratio using padding-top (calculated as (height/width)*100%) */
  /* For your 1920x400 banner: (400/1920)*100% ≈ 20.833% */
  padding-top: 20.833%;
  position: relative;
  width: 100%;
}

.banner-content {
  /* Position text anywhere on the banner */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff; /* Adjust based on your background image */
  text-align: center;
  padding: 0 20px; /* Add padding to prevent text touching screen edges on mobile */
}

Breakdown of the Solution #

1. background-size: cover: This ensures your background image scales proportionally to fill the entire container, avoiding stretching or awkward cropping while adapting to any screen size.
2. Aspect Ratio with padding-top: Instead of fixing the height, using a percentage-based padding-top lets the banner maintain its original width-to-height ratio. The percentage is calculated relative to the container's width, so it scales perfectly on all devices.
3. Absolute Positioned Text: By setting the banner container to position: relative, you can freely place the text container anywhere on the banner using absolute positioning. The transform: translate(-50%, -50%) trick centers the text perfectly, but you can adjust top/left values to align it left, right, or anywhere else.

Extra Tips for Polish #

• Adjust text size for mobile with media queries:

@media (max-width: 768px) {
  .banner-content h2 {
    font-size: 1.5rem;
  }
  .banner-content p {
    font-size: 0.9rem;
  }
}

• Add a placeholder background color for slow image loads:

.banner {
  background-color: #2c3e50; /* Pick a color that matches your banner's tone */
}

This setup gives you a fully scalable banner that supports embedded text, fixing all the issues you ran into earlier!

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