HTML Gifs with static size-CodePudding

I'm writing a responsive website using HTML/CSS and Bootstrap. "Carrousel" is a list of gifs on the website main page. I struggle to find a way to make those gifs static, so that they don't resize when page resizes or you look at it from a mobile. Ideally I would like them to stay fixed size so that when resizing a page in browser they remain the same size.

<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;
}

CodePudding user response：

You could start by changing dimensions in .Carrousel ul li to pixels instead of the relative vh and vw units.

For example

.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;
}

You might need to make similar changes to the CSS for .Carrousel ul and for sure you need to do something to .Carrousel

The trick will be to find pixel units that work for all devices.