html - 与地址栏一起使用
问题描述
我正在尝试为带有图像的标题制作轮播。我正在使用 BOOTSTRAP 4 作为框架来使轮播工作
<div id="aboutMe" class="carousel slide pt-1 container-fluid" data-ride="carousel">
<!-- Carousel indicators -->
<ul class="carousel-indicators">
<li data-target="#" class="active"></li>
<li data-target="#"></li>
<li data-target="#"></li>
</ul>
<!-- slide -->
<div class="carousel-inner">
<div class="carousel-item active">
<img style="background-image:url(https://images.unsplash.com/photo-1506882741710-98761c574b48?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=794de1f3a10ddf74c928e6cebd1aa55e&auto=format&fit=crop&w=1050&q=80)" alt="The Chicago Theater">
</div>
</div>
</div>
我想要做的是让我的图像覆盖容器,并且随着容器变小或变大,图像在轮播中调整大小
解决方案
您将图像用作具有内联样式的背景图像。你应该像这样添加图像
.carousel-item img {
width: 100% !important;
height: 100vh !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div id="aboutMe" class="carousel slide pt-1 container-fluid" data-ride="carousel">
<!-- Carousel indicators -->
<ul class="carousel-indicators">
<li data-target="#aboutMe" data-slide-to="0" class="active"></li>
<li data-target="#aboutMe" data-slide-to="1"></li>
<li data-target="#aboutMe" data-slide-to="2"></li>
</ul>
<!-- slide -->
<div class="carousel-inner active">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1506882741710-98761c574b48?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=794de1f3a10ddf74c928e6cebd1aa55e&auto=format&fit=crop&w=1050&q=80" alt="The Chicago Theater">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1506882741710-98761c574b48?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=794de1f3a10ddf74c928e6cebd1aa55e&auto=format&fit=crop&w=1050&q=80" alt="The Chicago Theater">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1506882741710-98761c574b48?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=794de1f3a10ddf74c928e6cebd1aa55e&auto=format&fit=crop&w=1050&q=80" alt="The Chicago Theater">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#aboutMe" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#aboutMe" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
推荐阅读
- r - 使用 dplyr 或 Purrr 从 2 个数据帧中提取匹配数据
- javascript - 如何在 Express.JS 中的“app.post”之后发送回客户端
- sql - (SQLITE) 基于累积范围的 SUM
- uml - 如何将多个对象输入边表示为一个 Action 节点并使图表具有可读性?
- php - 否定的空合并运算符(双问号 - ??)
- swift - 循环通过 CFURL 的 CFArray
- jq - 使用参数在 fzf 预览中运行 jq
- php - 带有 FFMPEG 的 Laravel Process() 对任何甚至很大的视频都会超时
- python - 子文件夹具有相同名称时,Airflow Packaged Dags(压缩)冲突
- r - R中的元编程和替代函数