Bootstrap 轮播图像大小更改导致页面上的元素移动的最佳解决方案

Question

我的网站主页上有一个图像轮播，有时一些图像的高度和宽度稍高。这会导致页面元素（例如轮播下面的测试项目列表）随着轮播中每个图像的变化而四处移动。

阻止页面上的所有内容四处移动的最佳解决方案是什么？我是否应该在从 CMS 上传时强制调整每张图片的大小？我应该在标记中强制调整尺寸吗？是否有一组 CSS 规则应用于 Bootstrap 轮播以使图像符合特定的、流畅的、响应大小，这样每次图像更改不会导致页面上的任何内容因大小而四处移动改变？

Answer 1

托德，你好。看看这个 post here 与 Bootstrap 旋转木马的关系。
有一个 Fiddle 的完整代码供您使用。

我在响应式轮播中有 4 张大小不同的图片。每张图片滑入时轮播不改变大小。
您可以使用它来开始拥有响应式轮播。
尝试调整大小以查看。

希望对您有所帮助。