css - 图像不适合引导轮播
问题描述
我几乎完成了一个网站的创建,但我正在为轮播而苦苦挣扎。
我试图让它对多个设备宽度做出响应,但是超过 1200 像素的轮播中的图像没有填满整个宽度。当我删除媒体查询时它工作正常,所以我假设这里发生了一些事情。
我是否认为一旦媒体查询被忽略,浏览器应该使用不在媒体查询块内的 CSS?
标准 CSS
.carousel-indicators li{
border-radius: 12px;
width: 14px;
height: 14px;
}
.carousel-inner{
width: auto;
height: 1000px;
}
.carousel-inner img{
width: 100%;
height: 100%;
}
}
@media (max-width: 575.98px) {
.carousel-inner{
width: 100%;
height: 450px;
}
.carousel-inner img{
width: auto;
height: 450px;
padding-top: 80px;
transform: translateX(-5rem);
}
}
@media (min-width: 576px) {
.carousel-inner{
width: 100%;
height: 450px;
}
.carousel-inner img{
width: auto;
height: 450px;
padding-top: 80px;
transform: translateX(-5rem);
}
}
@media (min-width: 768px) {
.carousel-inner{
width: 100%;
height: 450px;
}
.carousel-inner img{
width: auto;
height: 450px;
padding-top: 80px;
transform: translateX(-5rem);
}
}
@media (min-width: 992px) {
.carousel-inner{
width: 100%;
height: 600px;
}
.carousel-inner img{
width: auto;
height: 600px;
padding-top: 80px;
}
}
@media (min-width: 1200px) {
.carousel-inner{
width: 100%;
height: 600px;
}
.carousel-inner img{
width: auto;
height: 600px;
padding-top: 80px;
}
}
<!-- Image SLider & Indicators -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner" id="home">
<div class="carousel-item active">
<img src="img/warm.jpg">
</div>
<div class="carousel-item">
<img src="img/landscape2.jpg">
</div>
<div class="carousel-item">
<img src="img/river.jpeg">
</div>
<div class="carousel-caption">
<h1 class="display-2">ALIAS PHOTOGRAPHY</h1>
<h3>My Journey Through Nature...</h3>
<div class="showcase-buttons">
<!-- <button type="button" class="btn btn-outline-light btn-lg mr-1">VIEW DEMO</button> -->
<a href="#gallery"><button type="button" class="btn btn-primary btn-lg">VIEW GALLERY</button></a>
</div>
</div>
</div>
解决方案
这不是媒体查询问题,这是因为您将图像高度设置为 600px。这限制了它们与高度成正比。如果你想使用全宽图像,你应该尝试使用带有背景图像的 div。
推荐阅读
- java - 在 Java 中使用 Thread.sleep 时如何暂停输入
- php - 包含 php 网站的问题
- javascript - 在函数内增长和缩小的变量的空间复杂度
- python - Python字典到xlsx中的列
- linux - 在linux上的文件夹之间复制文件
- ssl - Rundeck gmail smtp设置
- javascript - React js: ./src/App.js Line 22: 'lastWinner' is not defined no-undef 搜索关键字以了解有关每个错误的更多信息
- javascript - 在 Firebase 中写入数据后读取数据
- c# - Dns.GetHostEntry 在 Xamarin 窗体中不起作用
- reactjs - 无法对未安装的组件执行 React 状态更新?