gpt4 book ai didi

html - 调整窗口大小时居中 Bootstrap Carousel 图像

转载 作者:太空宇宙 更新时间:2023-11-04 02:32:19 27 4
gpt4 key购买 nike

我看到很多类似的问题,但解决方案并不适用。

我正在尝试制作一个 Bootstrap 旋转木马,以便在调整窗口大小时,图像保持居中,同时保持所需的图像高度和最小 100% 宽度属性。

这有点难以解释,但你可以在http://www.lyft.com上看到类似的概念。

我在 codepen 上复制了一个类似的问题您可以看到,如果您将窗口缩小到移动设备的大小,图像将保持不变,最终您看到的是图像的左上角(通常是云或一些无法识别的模糊)。

我试图让这张图片向左移动并在水平 View 缩小时保持居中,以便图片保持相关性。

我的其他轮播样式:

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

/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
overflow: hidden;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: relative;
top: 0;
left: 0;
min-width: 100%;
max-width: none;
height: auto;
}
.carousel-inner img{
margin: auto;
}

#mycarousel{
position: relative;
top: 0;
}

还有简单的轮播:

<div id="mycarousel" class="carousel slide" data-ride="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>
<li data-target="#mycarousel" data-slide-to="3"></li>
<li data-target="#mycarousel" data-slide-to="4"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image">
</div>
</div>
</div>

最佳答案

我根据您在帖子中链接的 lyft 网站制定了一个解决方案。我将您的 img 转换为 div 并使用了背景图片,然后设置了适当的样式。

 <div class="carousel-inner" role="listbox">
<div class="item active">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=397');" data-color="lightblue" alt="First Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=689');" data-color="firebrick" alt="Second Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=675');" data-color="violet" alt="Third Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=658');" data-color="lightgreen" alt="Fourth Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=638');" data-color="tomato" alt="Fifth Image"></div>
</div>

然后删除这个 .carousel-inner > .item > img 并添加这个 CSS:

.carousel-inner .item .item-child {
background-position: top center;
background-size: cover;
position: absolute;
bottom:0;
top: 0;
left: 0;
right:0;
width: 100%;
height: auto;
}

can see the js.fiddle here如果你想玩它。希望对您有所帮助。

关于html - 调整窗口大小时居中 Bootstrap Carousel 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36293736/

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