Question

我使用Bootstrap来创建旋转木马，我有大图像，所以当屏幕小于图像时，不保持比例。

我怎么能改变它？

这是我的代码：

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

http://jsfiddle.net/DRQkQ/

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

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

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

但它不起作用

谢谢！

Answer 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你的小提琴更新了。

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

希望这对某人有用。

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

Answer 4

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

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

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

Answer 6

保持宽高比＆amp;完整报道轮播div：

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

Answer 7

显然，上面提到的解决方案对我不起作用（我不知道为什么？）但我找到了另一种使用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();
        }



    }

这似乎对我有用。

希望它也适合你。

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

Answer 8

正如其他人所提到的，css3很适合这个。我使用全宽，固定高度的容器，然后将图像保持宽高比与'覆盖'，然后扔掉溢出：

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

Answer 9

这些答案中的大多数已经够老了，只能用于Bootstrap3。这是Bootstrap 4的一种解决方案，它不仅保留相同的宽高比，而且将图像放入轮播中，因此它们尽可能大而不会被扭曲。这样可以防止在具有不同长宽比的幻灯片之间切换时轮播“跳”起来。

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

要更改轮播的宽高比，请更改padding-top的{{1}}属性。请注意，通过设置每个div.stretchy-wrapper的{{1}}属性来指定图像，这与Bootstrap标准略有不同，但仍然可以很好地工作。

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

background-image

.carousel-item

在转盘中保持图像宽高比

9 个答案: