我正在用SLICK制作一个图像 carousel .我想要适应图像的宽度沿屏幕和高度是与宽度的比例.以下是我的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米中的try :
.carousel-container {
margin: 0;
padding: 0;
max-width: 100%;
width: 100%;
}
carousel {
width: 100%;
height: auto;
}
这些图像似乎是以其原始分辨率打印的.
如何才能改正错误呢？我需要换成slick.css或其他的什么吗？