我正在使用 Slick 制作图像轮播。我想沿着屏幕调整图像的宽度，并且高度随宽度缩放。下面是我的
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>slick test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<div class="carousel-container">
<div >
<img class="carousel" src="images/1.jpg">
</div>
<div >
<img class="carousel" src="images/2.jpg">
</div>
<div >
<img class="carousel" src="images/3.jpg">
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
以下是我在
style.css.carousel-container {
margin: 0;
padding: 0;
max-width: 100%;
width: 100%;
}
carousel {
width: 100%;
height: auto;
}
图像似乎是以其原始分辨率打印的。
如何正确处理？我需要更改
slick.css我不明白这句话
高度随宽度缩放
希望这是你想要的。
.carousel-container {
margin: 0;
padding: 0;
max-width: 100%;
width: 100%;
}
.carousel {
width: 100vw;
height: auto;
}
.img-carousel{
width: 100%; height: 100%; object-fit: cover
}
body{
padding: 0;
margin: 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>slick test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
</head>
<body>
<div class="carousel-container">
<div class="carousel" >
<img class="img-carousel" src="https://picsum.photos/600/300">
</div>
<div class="carousel">
<img class="img-carousel" src="https://picsum.photos/100/300">
</div>
<div class="carousel">
<img class="img-carousel" src="https://picsum.photos/200/100">
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script>
$('.carousel-container').slick({
arrows:false
});
</script>
</body>
</html>为了使图像填充整个屏幕，我将 div 设置为 100wv，然后将
width: 100%; height: 100%; object-fit: cover为 slick 添加了一些设置
<script>
$('.carousel-container').slick({
arrows:false,
});
</script>
arrows:false,