我正在使用 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;
}
uj5u.com熱心網友回復：
您可以首先將尺寸更改.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;
}
您可能需要對 CSS 進行類似的更改.Carrousel ul，以確保您需要做一些事情.Carrousel
訣竅是找到適用于所有設備的像素單位。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/365502.html
上一篇：居中表單，在按鈕之后