HTML 静态大小的 Gif

Question

我正在使用 HTML/CSS 和 Bootstrap 编写响应式网站。 “Carrousel”是网站主页上的 gif 列表。我努力寻找一种使这些 gif 静态化的方法，以便它们不会在页面调整大小时或您从移动设备上查看时调整大小。理想情况下，我希望它们保持固定大小，以便在浏览器中调整页面大小时它们保持相同大小。

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

CSS:

.Carrousel {
    position: relative;
    z-index: 1;
    margin-top: 2vh;
    margin-bottom: 2vh;
    width: 100%;
    height: 33vh;
}
.Carrousel ul {
    list-style: none;
    width: 100%;
    height: auto;
    
    white-space: nowrap;
    overflow-x: scroll;

    padding: 0;
    margin: 0;

    scroll-behavior: smooth;
}
.Carrousel ul li {
    display: inline-block;
    height: 22.5vh;
    width: 17.5vw;
    background-color:#14222C;
    border-radius: 6%;
    margin-right: .5vw;

    padding:0;
}

Answer 1

您可以先将 .Carrousel ul li 中的尺寸更改为像素，而不是相对的 vh 和 vw 单位。

例如

.Carrousel ul li {
    display: inline-block;
    height: 200px; /* adjust as needed */
    width: 200px;  /* adjust as needed */
    background-color:#14222C;
    border-radius: 5px;  /* adjust as needed */
    margin-right: 5px;  /* adjust as needed */
    padding:0;
}

您可能需要对 .Carrousel ul 的 CSS 进行类似的更改，并且您肯定需要对 .Carrousel

做一些事情

诀窍是找到适用于所有设备的像素单位。

HTML 静态大小的 Gif

HTML Gifs with static size

html

css

responsive-design