极客笔记HTML 使用CSS和Slick轮播将图片适应屏幕的问题
问题描述
我正在使用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，然后在img标签上添加了width: 100%; height: 100%; object-fit: cover。
还对slick添加了一些设置。
<script>
$('.carousel-container').slick({
arrows:false,
});
</script>
arrows:false, 隐藏箭头。