我正在使用以下代码创建轮播,
created () {
// call backend
},
watch: {
$route(to, from) {
// call backend with (to.params.xxxx)
}
}
我希望轮播仅占据屏幕的70%,因此我使用以下规则,
<section id="slider">
<div id="landing-page-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active carsi">
<img class="landing-pg-image" src="image/1.png" alt="profile">
</div>
<div class="carousel-item carsi">
<img class="landing-pg-image" src="image/2.png" alt="profile">
</div>
<div class="carousel-item carsi">
<img class="landing-pg-image" src="image/3.png" alt="profile">
</div>
<a class="carousel-control-prev" href="#landing-page-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#landing-page-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</section>
不幸的是,这对轮播项目没有影响。我想念什么?
答案 0 :(得分:0)
您可以尝试。以这种方式使用它时,可以与轮播项目成比例地更改图像高度。
.carousel .item {
width:100%;
height: 70%;
}
.item img {
position: absolute;
top: 0;
left: 0;
min-height: 70%;
object-fit: cover;
}