在轮播中保持图像纵横比答案

【问题标题】：Maintain image aspect ratio in carousel在轮播中保持图像纵横比
【发布时间】：2013-06-21 20:36:23
【问题描述】：

我正在使用 Bootstrap 创建轮播，我有大图像，所以当屏幕小于图像时，比例不会保持。

我该如何改变呢？

这是我的代码：

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

http://jsfiddle.net/DRQkQ/

我需要图像适合 100% 的宽度，但保持 500 像素的高度（我认为是 500 像素）这应该意味着在较小的屏幕上我们看不到图像的最左侧和最右侧。

我尝试在 div 中包含图像并添加

overflow: hidden;
width: 100%;
height: 500px;
display: block;
margin: 0 auto;

但它不起作用

谢谢！

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

问题出在此处，在引导 CSS 上：

img {
  max-width: 100%;
  width: auto   9;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

设置max-width: 100%; 后，图像不会比视口大。您需要在 CSS 上覆盖该行为：

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

注意底部添加的max-width: none;。这是默认的最大宽度值并取消设置限制。

Here's你的小提琴更新了。

【讨论】：

它有效，谢谢！但是，调整页面大小时图像未居中，但这没关系。
更好的方法是使用 background-size: cover 属性，如下面的答案所述。这样，无论您如何调整屏幕大小，它都会保持图像纵横比。

【解决方案2】：

我认为最好使用 CSS3 object-fit 属性来处理它。

如果您有固定宽度和高度的图像，并且仍想保留纵横比，则可以使用object-fit:contain;。它将保持给定高度和宽度的比例。

例如：

img {
        height: 100px;
        width: 100px;
        object-fit: contain;
}

您可以在这里找到更多详细信息：http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

希望这对某人有用。

【讨论】：

object-fit: contain; 为我解决了这个问题。谢谢！

【解决方案3】：

删除轮播项目内的img 标签并添加背景。这样就可以使用 CSS3 的封面属性了。

.item1 {
    background: url('bootstrap/img/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

【讨论】：

【解决方案4】：

保持宽高比和轮播 div 的全覆盖：

img {
object-fit: cover;
overflow: hidden;
    }

【讨论】：

【解决方案5】：

我可以通过注释掉 carousel.css 行中的高度线来实现这一点，如下所示：

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

【讨论】：

【解决方案6】：

这段代码终于为我工作了：

.carousel .item {
    background:#F9F9F9;
    border:1px solid #E0E0E0;
    overflow:hidden;
    margin-bottom:1em;
    margin-top:1em;
    padding:5px;
}
.carousel-inner > .item > img {
    border: 1px solid #DDDDDD;
    float: left;
    margin: 0pt 3px;
    padding: 2px;
    height: none;
    width:  100%;
}

.carousel-inner > .item > img:hover {
    border: 1px solid #000000;
}

【讨论】：

将height:none 添加到.carousel-inner > .item > img 对我有用
如果我需要最大高度 500 像素？

【解决方案7】：

正如其他人所提到的，css3 可以很好地解决这个问题。我为容器使用了全宽、固定高度，然后用“cover”缩放图像保持纵横比，然后丢弃溢出：

.carousel .carousel-inner img {
  width: 100%;
  height: 30em;
  object-fit: cover;
  overflow: hidden;
}

【讨论】：

使用 bootstrap 提供的示例就像一个魅力

【解决方案8】：

显然，上述解决方案对我不起作用（我不知道为什么？）但我找到了另一种使用 javascript 的解决方法。

基本上，这是一种更乏味的方法，但也有效。您使用 jQuery 将轮播高度设置为宽度除以某个纵横比。

这是我的代码：

    var aspectRatio = 2.5; //Width to Height!!!
    var imageWidth;
    var imageHeight;

    //bind the window resize event to the method - 
    //change in carousel width is only triggered when size of viewport changes
    $(window).on("resize", methodToFixLayout);

    //updates the carousel width when the window is resized
    function methodToFixLayout(e){

        imageWidth = carousel.width();
        console.log("");
        console.log("Method width" + imageWidth);
        console.log("");

        imageHeight = imageWidth / aspectRatio;

        carouselContainer.height(imageHeight);    
        carousel.height(imageHeight);
        carouselPic.height(imageHeight);

         //solve the carousel glitch for small viewports - delete the carousel
        windowWidth = $(window).width();
        if (windowWidth < 840){
            carousel.hide();
            $("#side-navbar").hide();
        } else {
            carousel.show();
            $("#side-navbar").show();
        }



    }

这似乎对我有用。

希望它也对你有用。

您可以自己设置纵横比，也可以使用其他方法。首先，将窗口宽度和高度设置为图片格式正确的视图尺寸。查询宽高，计算出比例。将窗口恢复为原始宽度和高度。用户根本不会注意到变化，但会记录尺寸。

【讨论】：

【解决方案9】：

这些答案中的大多数已经足够老了，它们仅适用于 Bootstrap 3。这是 Bootstrap 4 的解决方案，它不仅保留了相同的纵横比，而且还可以将图像放入轮播中，这样它们就可以尽可能大而无需被扭曲。这可以防止轮播在不同纵横比的幻灯片之间切换时“跳跃”。

对于纵横比与轮播不匹配的图像，您会在边缘看到div.stretchy-wrapper 背景颜色。您可以将其设置为任何其他颜色，或将其完全移除以让容器的背景颜色显示出来。

要更改轮播的纵横比，请更改div.stretchy-wrapper 的padding-top 属性。请注意，图像是通过设置每个 .carousel-item 的 background-image 属性来指定的，这与 Bootstrap 标准略有不同，但仍然可以正常工作。

https://codepen.io/km0ser/pen/BazyemW

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_aspect_ratio_169 */
div.stretchy-wrapper {
    background-color: green;
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

div.stretchy-wrapper > div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="container">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="stretchy-wrapper carousel-inner">
            <div class="carousel-item active" style="background-image:url('https://picsum.photos/1600/900');">
            </div>
            <div class="carousel-item" style="background-image:url('https://picsum.photos/900/1600');">
            </div>
            <div class="carousel-item" style="background-image:url('https://picsum.photos/400/300');">
            </div>
            <div class="carousel-item" style="background-image:url('https://picsum.photos/300/400');">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div><!-- carousel -->
</div><!-- container -->

【讨论】：