图片画廊改用background-image的div后失效，缩略图点击无响应排查

别担心，你的脚本并不是只支持img标签，问题出在你用来承载背景图的.bbdiv上——它没有设置明确的宽高样式！

具体原因： #

• 当使用<img>标签时，图片本身自带固有尺寸，你设置width:100%后它会自动适配容器高度，所以能正常显示；
• 但换成background-image的div时，如果不给这个div指定宽高，它的默认尺寸是0px × 0px，哪怕父元素.mySlides被脚本设置为display:block，你也看不到任何内容。

解决方法： #

只需要给.bb类添加宽高样式，让它填满父容器.mySlides，同时确保.mySlides也有明确的尺寸：

1. 补充.bb的CSS样式：

.bb {
  width: 100%;
  height: 100%;
  background-size: cover; /* 可选：让背景图自适应容器，避免拉伸变形 */
  background-position: center; /* 可选：让背景图居中显示 */
}

2. 给.mySlides设置明确高度（根据你的布局需求调整）：

.mySlides {
  display: none;
  width: 100%;
  height: 400px; /* 或者用百分比继承父容器高度，比如 height: 100%; */
}

这样修改后，当你点击绅士缩略图时，脚本会把对应的.mySlides设置为display:block，里面的.bbdiv会有可见的尺寸，背景图就能正常显示出来了。

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