gpt4 book ai didi

html - 自动调整轮播图像的大小,固定高度为 500 像素和全宽

转载 作者:行者123 更新时间:2023-11-28 07:29:31 25 4
gpt4 key购买 nike

我对我的旋转木马非常满意,它运行良好,执行两件我想更改的事情,并感谢您的帮助。

问题:如何使图像适合轮播?现在它们是从底部切割的——见图像(蓝线)——但请注意,高度必须始终保持在 500 像素,并且轮播图像必须像现在一样从左到右全宽。所以唯一的一件事就是集中图像。它的切割方式如何标记为蓝色。

另外,我想删除导航栏,我可以看到它出现在每张图片的旋转木马顶部(导航箭头必须保留)。 - 标记为红色

这是目前的样子:

enter image description here

轮播代码:

<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<img src="new/3.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
</div>
</div>
<div class="item">
<img alt="" src="new/1.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<div class="item">
<img alt="" src="new/2.jpg">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- /.carousel -->

CSS 代码:

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
margin-bottom: -90px; /* odstep miedzy carusel slider a nastepnym containerem tzn O mnie */
}

.carousel .container {
position: relative;
z-index: 9;
}

.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}

.carousel .item {
height: 550px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}

.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 979px) {

.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}

.featurette {
height: auto;
padding: 0;
}
.featurette-image.pull-left,
.featurette-image.pull-right {
display: block;
float: none;
max-width: 40%;
margin: 0 auto 20px;
}
}


@media (max-width: 767px) {

.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {

}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead,
.carousel-caption .btn {
font-size: 18px;
}

.marketing .span4 + .span4 {
margin-top: 40px;
}

.featurette-heading {
font-size: 30px;
}
.featurette .lead {
font-size: 18px;
line-height: 1.5;
}

}

稍后尝试...

我试图玩那个但不幸的是我所做的是图像是集中的 - 但图像没有完全从左到右对齐,并且从底部到下一个contener元素(“Kilka slow ..”)有不同的距离.那是下面的代码和输出:

旋转木马:

<div class="container">
<div class="row">

<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<div style="background:url(/images/1.jpg) center center;
background-size:cover;" class="slider-size">
</div>
</div>
<div class="item">
<div style="background:url(/images/2.jpg) center center;
background-size:cover;" class="slider-size">
</div>
</div>
<div class="item">
<div style="background:url(/images/3.jpg) center center;
background-size:cover;" class="slider-size">
</div>
</div>
</div><!-- /.END CAROUSEL DIV -->
</div><!-- /.END MYCAROUSEL DIV -->
</div><!-- /.END BSEXAMPLE -->
</div>
</div>

CSS:

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
margin-bottom: -90px; /* odstep miedzy carusel slider a nastepnym containerem tzn O mnie */
}

.slider-size {
height: 500px;
}

.carousel .container {
position: relative;
z-index: 9;
}

.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}

.carousel .item {
height: 550px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}

.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 979px) {

.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}

.featurette {
height: auto;
padding: 0;
}
.featurette-image.pull-left,
.featurette-image.pull-right {
display: block;
float: none;
max-width: 40%;
margin: 0 auto 20px;
}
}


@media (max-width: 767px) {

.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {

}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead,
.carousel-caption .btn {
font-size: 18px;
}

.marketing .span4 + .span4 {
margin-top: 40px;
}

.featurette-heading {
font-size: 30px;
}
.featurette .lead {
font-size: 18px;
line-height: 1.5;
}

}

预览:

enter image description here

enter image description here

抱歉这么长的帖子,但希望有人能解决我的问题。

最佳答案

我个人会选择背景图像技术。像...

<div class="item active" style="background-image: url('images/1.jpg')">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
</div>
</div>

CSS

.item{
background-position: center center;
background-repeat: no-repeat;
background-size:cover;
}

编辑********

如果您在我写下“要使用的类似内容”时不投反对票,我将不胜感激。这是一个使用光滑 slider 的 fiddle ,我建议您使用 https://jsfiddle.net/tonytansley/c4n547at/ .我不是 100% 确定你在追求什么。

关于html - 自动调整轮播图像的大小,固定高度为 500 像素和全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31616922/

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