求助：如何实现HTML/CSS滑块图片的屏幕尺寸响应式适配

Hey there! Let's sort out that responsive slider problem you're facing. The root cause here is the fixed pixel dimensions on your slider container—those hardcoded values lock the slider to a single size, which breaks on smaller or larger screens. Here's how to refactor your code for full responsiveness:

Step 1: Make the Slider Container Responsive #

First, update your #slide styles to ditch fixed widths/heights and use relative sizing. We'll keep your original aspect ratio while letting it adapt to screen width:

#slide {
  position: relative;
  width: 100%;
  max-width: 1600px; /* Optional: keeps the slider from stretching too wide on large screens */
  aspect-ratio: 1600/550; /* Matches your original width-to-height ratio */
  overflow: hidden; /* Critical: hides slides that are outside the visible area */
}

If you need to support older browsers that don't recognize aspect-ratio, replace it with a padding-top trick to maintain the ratio:

#slide {
  position: relative;
  width: 100%;
  max-width: 1600px;
  height: 0;
  padding-top: calc(550 / 1600 * 100%); /* Calculates height based on width */
  overflow: hidden;
}

Step 2: Adjust Slide Container and Images #

Next, update the .sbackground and slide elements to fill the responsive container properly, and ensure images scale without distortion:

.sbackground {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 200%; /* Keeps two slides side-by-side */
  height: 100%; /* Matches the slider container's height */
  transition: left 1s;
  list-style: none; /* Removes default bullet points */
}

.sbackground li {
  display: inline-block; /* Replaces inline to allow height styling */
  width: 50%; /* Each slide takes exactly half the 200% container width */
  height: 100%;
}

.sbackground li img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Scales images to fill the slide while preserving aspect ratio */
}

Step 3: Keep Your Slide Transition Logic #

Your existing target-based transition code should still work perfectly with these changes:

#slide:target .sbackground {
  left: -100%;
}

Quick Notes #

• object-fit: cover ensures images don't get stretched or squished—if you need to support super old browsers, you can replace the <img> tags with divs using background images and background-size: cover instead.
• Adding max-width: 1600px to #slide prevents the slider from becoming overly large on ultra-wide screens, but you can remove it if you want it to span the full viewport width.

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