TailwindCSS图片超出父容器问题求助：侧边栏图片尺寸无法约束

架构老林

2026-4-27

Hey there! I see the issue—your images in the featured shows section are breaking out of their containers because they don't have proper size constraints. Let's fix that step by step.

The Root Cause

Looking at your code, the .details container and its child image don't have explicit width/height rules. Without these, the image will render at its native size, which pushes beyond the grid layout you set up for .featureds.

Solution: Add Constraints to the Image and Its Container

Update your Tailwind utility styles to enforce that both the .details container and the image inside it fill their parent space properly:

Modified CSS Section

@layer utilities {
  /* ... keep your existing styles ... */
  
  .content_header .featured .featureds > .featured_show {
    @apply h-full w-full flex items-end justify-center relative;
  }
  .content_header .featured .featureds > .featured_show > .details {
    @apply h-full w-full; /* Remove bg-red-500 if it's just for testing */
  }
  .content_header .featured .featureds > .featured_show > .details > img {
    @apply w-full h-full object-cover;
  }
}

What This Does

h-full w-full on .featured_show ensures each show card takes the full height of its grid row (since you're using grid-rows-5, this splits the parent container into 5 equal parts).
Applying the same h-full w-full to .details makes it fill the entire .featured_show card.
w-full h-full object-cover on the image forces it to stretch to fit the container while maintaining its aspect ratio—no more overflow, and no distorted images!