gpt4 book ai didi

jquery - 裁剪/隐藏 HTML img 标签而不是变形/拉伸(stretch)它

转载 作者:行者123 更新时间:2023-11-28 08:12:00 26 4
gpt4 key购买 nike

我正在使用 Bootstrap 3 Carousel,图像变小以匹配视口(viewport)。我需要的是保持图像的高度,而不是让图像拉伸(stretch)/变形,我可能需要从两侧切割它。

示例(坏):

Bad view (current)

示例(好):

Good view

slider 显示图像的哪一部分并不重要,重要的是它不会使图像变形。

这是我的旋转木马 HTML:

<div id="main-slider" class="carousel slide" data-ride="carousel" style="position: absolute; top: 50px;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./stylesheets/images/web-banner.jpg" alt="...">
<div class="carousel-caption">
TEST
</div>
</div>
<div class="item">
<img src="./stylesheets/images/web-banner.jpg" alt="...">
<div class="carousel-caption">
TEST
</div>
</div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#main-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#main-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

这是我为它编写的自定义 LESS:

.carousel.slide {
margin-top: -20px;

img {
width: 100% !important;
min-height: 600px !important;
}
}

我不知道如何开始解决这个问题。我完全没有想过这会怎样。

最佳答案

这样就可以了:

.carousel.slide {
margin-top: -20px;
}

img {

min-height: 100px !important;

}

.carousel-inner
{
width: 100px;
overflow: hidden;
}

关于jquery - 裁剪/隐藏 HTML img 标签而不是变形/拉伸(stretch)它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29215159/

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