如何让HTML Lightbox及图片画廊实现响应式？附代码求助

Got it, let's get your gallery and lightbox working seamlessly across all screen sizes. The main issues are fixed pixel dimensions in your CSS that prevent proper scaling, so here's how to tweak things step by step:

1. Make the Thumbnail Gallery Responsive #

Your current gallery uses rigid fixed widths that break on smaller screens. We'll switch to a flexible layout and adjust image sizing:

• Replace fixed width:720px on #gallery with a responsive max-width
• Use Flexbox instead of floats for the item grid to handle wrapping automatically
• Remove fixed dimensions from .item and use flexible sizing with a minimum width
• Ensure images scale correctly without distortion

2. Make the Lightbox Modal Responsive #

The lightbox currently has a fixed minimum width that overflows small screens. We'll adjust the container and image sizing:

• Remove the rigid min-width:500px on .lightbox .box and use viewport-based widths
• Ensure lightbox images don't exceed the container width
• Add mobile-specific adjustments for font sizes and spacing

Modified Complete Code #

<section id="gallery">
  <!-- thumbnail image wrapped in a link -->
  <section class="item">
    <a href="#img1">
      <img src="https://cbra.co.in/wp-content/uploads/2019/10/millet-guru.jpg">
    </a>
  </section>
  <section class="item">
    <a href="#img2">
      <img src="https://cbra.co.in/wp-content/uploads/2019/10/millet-guru.jpg">
    </a>
  </section>
  <section class="item">
    <a href="#img3">
      <img src="https://cbra.co.in/wp-content/uploads/2019/10/millet-guru.jpg">
    </a>
  </section>
</section>
<section id="gallery">
  <!-- thumbnail image wrapped in a link -->
  <section class="item">
    <a href="#img4">
      <img src="https://cbra.co.in/wp-content/uploads/2019/10/millet-guru.jpg">
    </a>
  </section>
  <section class="item">
    <a href="#img5">
      <img src="https://cbra.co.in/wp-content/uploads/2019/10/millet-guru.jpg">
    </a>
  </section>
  <section class="item">
    <a href="#img6">
      <img src="https://cbra.co.in/wp-content/uploads/2019/10/millet-guru.jpg">
    </a>
  </section>
</section>
<!-- lightbox container hidden with CSS -->
<div class="lightbox" id="img1">
  <a class="close_out" href="#"></a>
  <div class="box">
    <a class="close" href="#">X</a>
    <p class="title">Lorem ipsum dolor sit amet</p>
    <div class="content">
      <img src="https://cbra.co.in/wp-content/uploads/2019/10/millet-guru.jpg">
      <p class="desc">Lorem ipsum dolor sit <a href="#">hello</a></p>
    </div>
    <a class="prev" href="#img3">Previous</a>
    <a class="next" href="#img2">Next</a>
    <div class="clear"></div>
  </div>
</div>
<div class="lightbox" id="img2">
  <a class="close_out" href="#"></a>
  <div class="box">
    <a class="close" href="#">X</a>
    <p class="title">Lorem ipsum dolor sit amet</p>
    <div class="content">
      <img src="https://cbra.co.in/wp-content/uploads/2019/10/millet-guru.jpg">
      <p class="desc">Lorem ipsum dolor sit</p>
    </div>
    <a class="prev" href="#img1">Previous</a>
    <a class="next" href="#img3">Next</a>
    <div class="clear"></div>
  </div>
</div>
<div class="lightbox" id="img3">
  <a class="close_out" href="#"></a>
  <div class="box">
    <a class="close" href="#">X</a>
    <p class="title">Lorem ipsum dolor sit amet</p>
    <div class="content">
      <img src="https://cbra.co.in/wp-content/uploads/2019/10/millet-guru.jpg">
      <p class="desc">Lorem ipsum dolor sit amet,</p>
    </div>
    <a class="prev" href="#img2">Previous</a>
    <a class="next" href="#img1">Next</a>
    <div class="clear"></div>
  </div>
</div>
<div class="lightbox" id="img4">
  <a class="close_out" href="#"></a>
  <div class="box">
    <a class="close" href="#">X</a>
    <p class="title">Lorem ipsum dolor sit amet</p>
    <div class="content">
      <img src="https://cbra.co.in/wp-content/uploads/2019/10/millet-guru.jpg">
      <p class="desc">Lorem ipsum dolor sit<a href="#">hello</a></p>
    </div>
    <a class="prev" href="#img3">Previous</a>
    <a class="next" href="#img5">Next</a>
    <div class="clear"></div>
  </div>
</div>
<div class="lightbox" id="img5">
  <a class="close_out" href="#"></a>
  <div class="box">
    <a class="close" href="#">X</a>
    <p class="title">Lorem ipsum dolor sit amet</p>
    <div class="content">
      <img src="https://cbra.co.in/wp-content/uploads/2019/10/millet-guru.jpg">
      <p class="desc">Lorem ipsum dolor sit amet,</p>
    </div>
    <a class="prev" href="#img4">Previous</a>
    <a class="next" href="#img6">Next</a>
    <div class="clear"></div>
  </div>
</div>
<div class="lightbox" id="img6">
  <a class="close_out" href="#"></a>
  <div class="box">
    <a class="close" href="#">X</a>
    <p class="title">Lorem ipsum dolor sit amet</p>
    <div class="content">
      <img src="https://cbra.co.in/wp-content/uploads/2019/10/millet-guru.jpg">
      <p class="desc">Lorem ipsum dolor sit amet,</p>
    </div>
    <a class="prev" href="#img5">Previous</a>
    <a class="next" href="#img4">Next</a>
    <div class="clear"></div>
  </div>
</div>
<style>
body {
  font-size:22px;
  line-height: 32px;
  color: #0f0f0f;
  word-wrap:break-word !important;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 60px;
  text-align: center;
  color: #0f0f0f;
  margin-top: 100px;
  font-family: 'Bree Serif', 'serif';
}

h3 {
  font-size: 30px;
  text-align: center;
  color: #0f0f0f;
}

h3 a, a {
  color: #0f0f0f;
}

p {
  text-align: center;
}

/* Responsive Gallery Styles */
#gallery {
  max-width: 100%;
  margin: 50px auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

#gallery .item {
  flex: 1 1 250px; /* Grow/shrink, minimum 250px width */
  max-width: 300px;
  border: 10px solid #FFF;
  box-shadow: 0 8px 6px -6px black;
  overflow: hidden;
}

#gallery .item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive Lightbox Styles */
.lightbox {
  width: 0;
  height: 0;
  overflow: hidden;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  color:#333333;
  transition: width .5s ease-in-out, height .5s ease-in-out;
  background: rgba(0,0,0,.2);
}

.lightbox:target {
  width: 100%;
  height: 100%;
}

.lightbox .box {
  max-width: 90vw; /* 90% of viewport width */
  width: 100%;
  margin: 5vh auto;
  padding:10px 20px;
  background-color:#FFF;
  box-shadow: 0px 1px 26px -3px #777777;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.lightbox .title {
  margin:0;
  padding:0 0 10px 0px;
  border-bottom:1px #ccc solid;
  font-size:22px;
}

.lightbox .content {
  display:block;
  position:relative;
}

.lightbox .content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.lightbox .content .desc {
  z-index:99;
  bottom:0;
  position:absolute;
  padding:10px;
  margin:0;
  background:rgba(0,0,0,0.8);
  color:#fff;
  font-size:17px;
  opacity:0;
  text-align: left;
  transition: opacity ease-in-out 0.5s;
  width: 100%;
  box-sizing: border-box;
}

.lightbox .content:hover .desc {
  opacity:1;
}

.lightbox .next, .lightbox .prev, .lightbox .close {
  display:block;
  text-decoration:none;
  font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:22px;
  color:#858585;
}

.prev {
  float:left;
}

.next, .close {
  float:right;
}

.clear {
  display:block;
  clear:both;
}

.close_out {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Mobile-specific adjustments */
@media (max-width: 600px) {
  body {
    font-size: 18px;
    line-height: 28px;
  }
  
  h1 {
    font-size: 40px;
    margin-top: 50px;
  }
  
  h3 {
    font-size: 24px;
  }
  
  .lightbox .title {
    font-size: 20px;
  }
  
  .lightbox .content .desc {
    font-size: 15px;
  }
}
</style>

Key Changes Explained: #

• Gallery Layout: Switched from floats to Flexbox with flex-wrap: wrap so thumbnails automatically adjust to screen width. Used flex: 1 1 250px to let items grow/shrink while maintaining a minimum size.
• Image Sizing: Set width:100% and height:auto on all images to preserve aspect ratio and prevent overflow.
• Lightbox Container: Replaced fixed min-width with max-width:90vw so the modal never exceeds 90% of the screen width, avoiding overflow on mobile.
• Fixed Duplicate IDs: Notice you had duplicate #img1, #img2, #img3 IDs for your lightboxes – I fixed those to #img4, #img5, #img6 to ensure proper navigation (duplicate IDs break anchor targeting).
• Mobile Media Query: Adjusted font sizes for smaller screens to improve readability without crowding.

Now your gallery will scale smoothly from desktop down to mobile, and the lightbox will always fit within the viewport!

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