gpt4 book ai didi

jquery - 设置图片轮播的高度、宽度

转载 作者:行者123 更新时间:2023-11-28 03:01:21 25 4
gpt4 key购买 nike

我的图片轮播代码如下

<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-0">
<div id="imageCarousel" class="carousel slide" data-interval="4000"
data-ride="carousel" data-pause="hover" data-wrap="true">

<ol class="carousel-indicators">
<li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
<li data-target="#imageCarousel" data-slide-to="1"></li>
<li data-target="#imageCarousel" data-slide-to="2"></li>
<li data-target="#imageCarousel" data-slide-to="3"></li>
</ol>

<div class="carousel-inner">
<div class="item active">
<img src="~/Images/Desert.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Desert</h3>
<p>Desert Image Description</p>
</div>
</div>
<div class="item">
<img src="~/Images/Jellyfish.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Jellyfish</h3>
<p>Jellyfish Image Description</p>
</div>
</div>
<div class="item">
<img src="~/Images/Lighthouse.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Lighthouse</h3>
<p>Lighthouse Image Description</p>
</div>
</div>
<div class="item">
<img src="~/Images/Penguins.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Penguins</h3>
<p>Penguins Image Description</p>
</div>
</div>
</div>

<a href="#imageCarousel" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#imageCarousel" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

</div>
</div>
</div>

并添加了以下jquery:

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

最后我用下面的代码来设置图片轮播的大小

<style>
.carousel-inner > .item > img {
width: 1200px;
height: 360px;
}
</style>

问题是当页面加载时,它以给定的尺寸加载,然后突然变大。当我将宽度更改为不同的数字时,宽度将按预期设置,但高度的大小未设置为给定值。当我减小宽度时,高度也会随宽度而变化。我为新的 MVC 简单 Web 应用程序实现了代码,这正如我预期的那样运行良好。但是当我尝试为现有元素实现相同的设置时,我遇到了设置轮播高度的问题。

谁能给我一个解决这个问题的想法。

最佳答案

对高度属性使用 !important 规则。 !important 规则会覆盖该特定属性。

.carousel-inner > .item > img {
width: 1200px;
height: 360px !important;

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-0">
<div id="imageCarousel" class="carousel slide" data-interval="4000"
data-ride="carousel" data-pause="hover" data-wrap="true">

<ol class="carousel-indicators">
<li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
<li data-target="#imageCarousel" data-slide-to="1"></li>
<li data-target="#imageCarousel" data-slide-to="2"></li>
<li data-target="#imageCarousel" data-slide-to="3"></li>
</ol>

<div class="carousel-inner">
<div class="item active">
<img src="~/Images/Desert.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Desert</h3>
<p>Desert Image Description</p>
</div>
</div>
<div class="item">
<img src="~/Images/Jellyfish.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Jellyfish</h3>
<p>Jellyfish Image Description</p>
</div>
</div>
<div class="item">
<img src="~/Images/Lighthouse.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Lighthouse</h3>
<p>Lighthouse Image Description</p>
</div>
</div>
<div class="item">
<img src="~/Images/Penguins.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Penguins</h3>
<p>Penguins Image Description</p>
</div>
</div>
</div>

<a href="#imageCarousel" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#imageCarousel" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

</div>
</div>
</div>

关于jquery - 设置图片轮播的高度、宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46181610/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com