我一直在嘗試制作一個適合我正在構建的網站的側欄的影像滑塊，但是，它出現了具有不同縱橫比的不同圖片，使其看起來很亂。我想嘗試使用我正在使用的當前滑塊將它自動裁剪（甚至可能是圓形）。提前致謝！
<head>
<style type="text/css">
#slider {
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 20s slider infinite;
}
#slider figure img {
float: left;
width: 20%;
}
@keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
</style>
</head>
<body>
<div id="slider">
<figure>
<img src="img/plant.png">
<img src="img/plant2.png">
<img src="img/plant3.png">
<img src="img/plant4.png">
<img src="img/plant.png">
</figure>
</div>
</body>
</html>
uj5u.com熱心網友回復：
訣竅是強制所有影像通過繼承父元素的高度，min-height: 100%;然后height: auto;使用object-fit: cover;來保持縱橫比。
#slider {
overflow: hidden;
height: 180px; /* or any value depending on how high you want it to be. 100% for matching the longest image */
}
#slider figure {
display: flex;
width: 500%;
height: 100%;
margin: 0;
position: relative;
animation: 20s slider infinite;
}
#slider figure img {
display: block;
width: 20%;
min-height: 100%;
object-fit: cover;
height: auto;
}
@keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
} <div id="slider">
<figure>
<img src="http://placekitten.com/700/300">
<img src="http://placekitten.com/600/600">
<img src="http://placekitten.com/500/300">
<img src="http://placekitten.com/700/400">
<img src="http://placekitten.com/700/300">
</figure>
</div>還有一件事，position: relative;不采用left, right, ... 值。這只適用于absolute和fix定位的元素。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/512727.html
上一篇：如何通過選擇編號將視頻轉換為帶有ffmpeg的影像？
下一篇：根據輸入生成隨機6個字符