在轮播中保持图片宽高比

Question

我正在使用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中并添加以下CSS：

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

但它不起作用

谢谢！

- Vilarix

Answer 1

问题出在这里，就在Bootstrap CSS上：

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

设置了 max-width: 100%; 后，图像大小不会超出视窗。你需要在 CSS 中覆盖这个行为：

设置 max-width: none; 或者使用一个更大的值来使图片变得更大。

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

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

这里是您更新后的示例。

- scumah

---

它有效了，谢谢！但是当调整页面大小时，图像没有居中，但这并不重要。 - Vilarix

更好的方法是使用下面答案中提到的background-size: cover属性。这样，无论如何调整屏幕大小，它都会保持图像的纵横比。 - alchuang

Answer 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 希望对某些人有用。

- Dev

---

object-fit: contain; 对我的问题进行了修复。谢谢！ - Adrian

Answer 3

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

.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;
}

- claudio

Answer 4

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

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

- Phil Lucks

Answer 5

这段代码最终对我有效:

.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;
}

- Ryan Fishel

---

将 height:none 添加到 .carousel-inner > .item > img 对我有效。 - CrandellWS

如果我需要最大高度为500像素？ - nim

Answer 6

我能够通过注释掉carousel.css文件中的height行来实现这一点，如下所示：

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

- grooble

Answer 7

正如其他人所提到的，CSS3非常适合这个问题。我使用了完整宽度、固定高度的容器，然后使用“cover”保持纵横比缩放图像，最后舍弃溢出部分：

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

- shuckc

---

使用Bootstrap提供的示例，效果非常好。 - Olympiloutre

Answer 8

大多数答案都已经过时，只适用于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 -->

- kmoser

Answer 9

显然，上述解决方案对我来说并没有起作用（我不知道为什么？），但是我通过使用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();
        }



    }

对我来说，它似乎运行良好。

希望它也能为你工作。

您可以自己设置纵横比，或使用另一种方法。首先，将窗口宽度和高度设置为视图尺寸，在该尺寸下图片的格式良好。查询宽度和高度，并计算出纵横比。将窗口恢复到原始宽度和高度。用户根本不会注意到变化，但尺寸会被记录下来。

- Nicholas Ang