如何让Bootstrap轮播模块内的GIF图保持固定尺寸不随页面缩放变化

问题核心原因 #

• 你当前容器使用的vw/vh是相对视口的单位，会随浏览器窗口尺寸变化自动缩放
• Bootstrap默认给所有img元素设置了max-width: 100%规则，会覆盖你写在标签上的固定宽度属性，强制图片宽度不超过父容器
• 没有给GIF图片本身设置固定宽高规则

1. 修正HTML语法错误 #

你现有代码里的img标签后多了一个冗余的</a>闭合标签，先删除避免渲染异常，修改后如下：

<div class="row no-gutters m-0 pt-0 Carrousel">
   <ul id="C1">
      <li><img src="assets/gif1.gif" alt="gif-trailer" width="360" /></li>
      <!-- more gifs -->          
      <li></li>  
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>
</div>

2. 替换CSS中的相对单位为固定像素单位，新增图片固定尺寸规则 #

完整修改后的CSS如下：

.Carrousel {
    position: relative;
    z-index: 1;
    margin-top: 2vh;
    margin-bottom: 2vh;
    width: 100%;
    /* 高度改成固定像素，适配li的高度，可自行调整数值 */
    height: 260px;
}
.Carrousel ul {
    list-style: none;
    width: 100%;
    height: 100%;
    
    white-space: nowrap;
    overflow-x: scroll;

    padding: 0;
    margin: 0;

    scroll-behavior: smooth;
}
.Carrousel ul li {
    display: inline-block;
    /* 把vw/vh替换为固定像素，和你要的GIF尺寸匹配，可自行调整数值 */
    height: 225px;
    width: 360px;
    background-color:#14222C;
    border-radius: 6%;
    margin-right: 6px;
    padding:0;
    /* 超出部分隐藏，避免GIF尺寸不对时撑破容器 */
    overflow: hidden;
}
/* 新增GIF图片固定尺寸规则 */
.Carrousel ul li img {
    width: 360px !important;
    height: 225px !important;
    /* 覆盖Bootstrap默认的max-width规则 */
    max-width: unset !important;
    /* 可选：如果GIF比例和容器不一致，按容器尺寸裁剪避免变形 */
    object-fit: cover;
}

如果需要调整固定尺寸，直接修改上面代码里的360px（宽度）和225px（高度）为你需要的数值即可，修改后不管浏览器窗口如何缩放、移动端访问，GIF和容器尺寸都会保持固定不变。

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