模态图片改造：统一裁剪/自定义缩略图+弹窗全图带描述

需求说明 #

• 统一缩略图裁剪：将不同尺寸原图裁剪为固定大小缩略图，点击弹窗显示完整原图；保留缩略图下方描述，解决overflow: hidden导致描述隐藏、底部圆角丢失的问题，支持自定义单张缩略图的裁剪区域。
• 自定义缩略图支持：部分图片使用自定义缩略图，点击后弹窗显示对应完整原图，同时保留描述。

完整修改代码 #

HTML 部分 #

<!-- 自动裁剪+居中显示 -->
<div class="myImg" data-crop-position="center">
  <div class="img-cropper">
    <img src="https://thepasteldyke.neocities.org/art/artfight/2023/3artho.png" alt="one">
  </div>
  <div class="text">One</div>
</div>

<!-- 自动裁剪+顶部显示 -->
<div class="myImg" data-crop-position="top">
  <div class="img-cropper">
    <img src="https://thepasteldyke.neocities.org/art/artfight/2023/gloomy_dollette_1.png" alt="two">
  </div>
  <div class="text">Two</div>
</div>

<!-- 使用自定义缩略图 -->
<div class="myImg">
  <div class="img-cropper">
    <img src="自定义缩略图地址" data-original="https://thepasteldyke.neocities.org/art/artfight/2023/cherryxroll2.gif" alt="three">
  </div>
  <div class="text">Three</div>
</div>

<!-- Modal Elements -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <div class="modal-content" id="img01"></div>
</div>

CSS 部分 #

body {font-family: Arial, Helvetica, sans-serif;}

*,*:before, *:after{box-sizing: border-box;}
body{
  margin: 0;
  padding: 0;
  font-family: Arial;
}

.myImg{
  cursor: pointer;
  transition: 0.3s;
  display: inline-block;
  vertical-align: top;
  width: 300px;
  padding: 5px;
}

.myImg:hover {
  opacity: 0.7;
}

/* 裁剪容器：专门处理图片固定尺寸与裁剪 */
.img-cropper {
  width: 300px;
  height: 200px;
  overflow: hidden;
  border-radius: 5px;
  position: relative;
}

.myImg .img-cropper img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例填充容器，超出部分裁剪 */
  position: absolute;
  top: 0;
  left: 0;
}

/* 自定义裁剪位置控制 */
.myImg[data-crop-position="top"] .img-cropper img {
  object-position: top;
}
.myImg[data-crop-position="center"] .img-cropper img {
  object-position: center;
}
.myImg[data-crop-position="bottom"] .img-cropper img {
  object-position: bottom;
}
.myImg[data-crop-position="left"] .img-cropper img {
  object-position: left;
}
.myImg[data-crop-position="right"] .img-cropper img {
  object-position: right;
}
/* 支持自定义坐标，比如 data-crop-position="20% 30%" */
.myImg[data-crop-position] .img-cropper img {
  object-position: attr(data-crop-position);
}

.myImg .text {
  margin-top: 8px;
  text-align: center;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: 0 auto 20px auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
.modal-content img{
  width: 100%;
  display: block;
  border-radius: 5px;
}
.modal-content .text{
  font-size: 16px;
  color: #f1f1f1;
  padding: 10px;
  text-align: center;
}
.modal-content{
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}

JavaScript 部分 #

var modal = document.getElementById('myModal');
var imgContainers = document.getElementsByClassName('myImg');
var modalContent = document.getElementById("img01");
var closeBtn = document.getElementsByClassName("close")[0];

// 绑定所有图片容器点击事件
for (var i = 0; i < imgContainers.length; i++) {
  var container = imgContainers[i];
  container.onclick = function() {
    modal.style.display = "block";
    // 获取当前容器内的图片和描述文本
    var img = this.querySelector('.img-cropper img');
    var descText = this.querySelector('.text').textContent;
    // 优先读取自定义原图地址，没有则用当前图片地址
    var originalSrc = img.getAttribute('data-original') || img.src;
    
    // 构建弹窗内容
    modalContent.innerHTML = `
      <img src="${originalSrc}" alt="${img.alt}">
      <div class="text">${descText}</div>
    `;
  }
}

// 关闭弹窗
closeBtn.onclick = function() {
  modal.style.display = "none";
}

// 点击弹窗背景关闭
window.onclick = function(event) {
  if (event.target === modal) {
    modal.style.display = "none";
  }
}

核心修改说明 #

1. 裁剪容器分离：新增.img-cropper独立容器处理图片裁剪，将overflow: hidden和固定尺寸限制在这个容器内，描述文本放在容器外，彻底解决描述被隐藏、圆角丢失的问题。
2. 自定义裁剪区域：通过data-crop-position属性控制图片的object-position，支持预定义的top/center/bottom/left/right，也可以直接传入百分比或像素坐标（如data-crop-position="20% 30%"）。
3. 自定义缩略图支持：给缩略图添加data-original属性存储原图地址，JS点击时优先读取该地址作为弹窗显示的图片，不影响缩略图本身的显示。
4. 弹窗逻辑优化：不再直接复制容器的innerHTML，而是重新构建弹窗内容，避免缩略图的裁剪样式污染弹窗内的大图。

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