具有静态大小的 HTML Gif答案

【问题标题】：HTML Gifs with static size具有静态大小的 HTML Gif
【发布时间】：2022-01-03 03:27:01
【问题描述】：

我正在使用 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;
}

【问题讨论】：

标签： html css responsive-design

【解决方案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 做一些事情

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

【讨论】：