Bootstrap 5中动态生成图片的div容器实现响应式的方法问询

嘿，这个问题其实很好解决！因为Bootstrap的img-fluid类本质就是给图片设置了max-width: 100%;和height: auto;这两个核心样式，哪怕图片是通过JavaScript动态生成的，我们也有两种简单的方式实现响应式适配：

方法一：直接给动态创建的图片添加img-fluid类 #

你只需要修改updateImage函数，在创建img元素后手动添加Bootstrap的img-fluid类即可，代码改动非常小：

function updateImage() {
  imageWrapper.innerHTML = '';
  var image = imageWrapper.appendChild(document.createElement('img'));
  image.src = './szubienica_images/s' + guessFails + '.jpg';
  // 新增这一行，给动态图片添加响应式类
  image.classList.add('img-fluid');
};

这样生成的图片就会自动继承Bootstrap的响应式特性，在不同屏幕尺寸下自动缩放。

方法二：通过容器CSS样式实现全局适配 #

如果你不想改动JavaScript逻辑，也可以给图片容器.image-wrapper添加CSS规则，让里面的所有图片自动应用响应式样式：

.image-wrapper img {
  max-width: 100%;
  height: auto;
}

这个方法的原理和img-fluid类完全一致，相当于把响应式样式应用到容器内的所有图片上，适合需要批量处理的场景。

两种方法都能完美解决你遇到的问题，选哪种取决于你更倾向于修改JS还是CSS~

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