响应式轮播图
来源：1-1 课程导学
慕后端1189009
2021-10-04
视口缩小时，图片无法跟着响应式缩小
具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="swiper">
<div class="button next">
</div>
<div class="swiper-wrapper">
<div class="swiper-container">
<div class="swiper-slide">
<img src="https://blog.hyperair.com/zh-HK/wp-content/uploads/sites/2/2021/09/xti68w0im12ae41btzay.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://blog.hyperair.com/zh-HK/wp-content/uploads/sites/2/2021/09/xti68w0im12ae41btzay.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://blog.hyperair.com/zh-HK/wp-content/uploads/sites/2/2021/09/xti68w0im12ae41btzay.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://blog.hyperair.com/zh-HK/wp-content/uploads/sites/2/2021/09/xti68w0im12ae41btzay.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://blog.hyperair.com/zh-HK/wp-content/uploads/sites/2/2021/09/xti68w0im12ae41btzay.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://blog.hyperair.com/zh-HK/wp-content/uploads/sites/2/2021/09/xti68w0im12ae41btzay.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://blog.hyperair.com/zh-HK/wp-content/uploads/sites/2/2021/09/xti68w0im12ae41btzay.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://blog.hyperair.com/zh-HK/wp-content/uploads/sites/2/2021/09/xti68w0im12ae41btzay.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://blog.hyperair.com/zh-HK/wp-content/uploads/sites/2/2021/09/xti68w0im12ae41btzay.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://blog.hyperair.com/zh-HK/wp-content/uploads/sites/2/2021/09/xti68w0im12ae41btzay.jpg" alt="">
</div>
</div>
</div>
<div class="button prev">
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.swiper {
display: flex;
justify-content: center;
align-items: center;
}
.swiper-wrapper {
height: 400px;
display: flex;
align-items: center;
border: 1px solid red;
width: 1048px;
}
.swiper-container {
flex: 1;
margin: 0 24px;
padding: 8px 0;
display: flex;
border: 1px solid blue;
overflow: hidden;
}
.button {
width: 48px;
height: 48px;
background: #fff;
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
border-radius: 50%;
padding: 24px;
}
.swiper-slide {
flex-basis: 288px;
flex-shrink: 0;
margin-right: 16px;
}
.swiper-slide img {
width: 100%;
object-fit: cover;
}
写回答
1回答
-
西门老舅
2021-10-04
同学你好，我试着理解了一下你的需求，你看看是不是你希望的样子。
.swiper-slide {
flex-basis: 25%;
flex-shrink: 0;
padding: 0 8px;
}
00
相似问题