在旋转木马中保持图像长宽比

I am using Bootstrap to create a carousel, I have large images so when the screen is smaller than the image, the ratio is not kept.

我正在使用Bootstrap创建一个旋转木马，我有大的图像，所以当屏幕比图像小时，比例就不会保持。

How could I change that?

我怎么能改变呢?

Here is my code:

这是我的代码:

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

http://jsfiddle.net/DRQkQ/

http://jsfiddle.net/DRQkQ/

I need the image to fit 100% width but keep its height of 500px (I think it's 500px) this should mean that on smaller screen we don't see the far left and far right of the image.

我需要图像的宽度为100%但高度为500px(我认为是500px)这意味着在更小的屏幕上，我们看不到图像的最左边和最右边。

I tried containing the image in a div and add

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

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

But it doesn't work

但它不工作

Thank you!

谢谢你！

8 个解决方案

#1

The issue lays here, on bootstrap CSS:

问题就在这里，关于引导CSS:

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

Having set max-width: 100%; the image won't be any larger than the viewport. You need to override that behavior on your CSS:

有设置max-width:100%;图像不会比viewport大。您需要重写CSS上的行为:

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

Note the max-width: none; added at the bottom. This is the default max-width value and unsets the limit.

注意max-width:没有;添加在底部。这是默认的max-width值，并取消限制。

Here's your fiddle updated.

这是你的小提琴更新。

#2

I think it is better to handle it with CSS3 object-fit attribute.

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

If you have image with fixed width and height and still if you want to preserve the aspect ratio, you can use object-fit:contain;. It will maintain the ratio with given height and width.

如果你有固定宽度和高度的图像，如果你想要保持纵横比，你可以使用object-fit:包含;它将在给定的高度和宽度下保持比率。

For example :

例如:

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

You can find more details here : http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

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

Hope this will be useful to someone.

希望这对某人有用。

#3

Delete the img tag inside the carousel item and add a background. In this way you can use the CSS3 cover property.

删除carousel项目中的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

I was able to achieve this by commenting out the height line from the carousel.css line as shown below:

我可以通过注释旋转木马上的高度线来实现这一点。css行如下所示:

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

#5

This code finally worked for me:

这段代码最终为我工作:

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

#6

to maintain aspect ratio & full coverage of carousel div:

维持高宽比及旋转木马的全覆盖范围:

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

#7

Apparently, the above mentioned solutions did not work for me (I don't know why?) but I found another workaround using javascript.

显然，上面提到的解决方案对我不起作用(我不知道为什么?)，但是我发现了另一个使用javascript的方法。

Basically, this is a more tedious method but also works. You use jQuery to set the carousel height to the width divided by a certain aspect ratio.

基本上，这是一种比较繁琐的方法，但也可以工作。使用jQuery将旋转木马高度设置为宽度除以一定的纵横比。

Here is my code:

这是我的代码:

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



    }

It seems to work for me fine.

对我来说似乎还行。

Hope it works for you too.

希望它对你也适用。

You can either set the aspect ratio yourself, or use another method. First, set the window width and height to a view dimension where the picture appears well formatted. Query the width and height, and work out the ratio. Return the window back to the original width and height. The user would not notice the change at all but the dimensions would be recorded.

您可以自己设置纵横比，或者使用另一种方法。首先，将窗口的宽度和高度设置为视图维度，在该维度中，图像看起来格式良好。查询宽度和高度，并计算出比例。将窗口返回到原来的宽度和高度。用户根本不会注意到更改，但会记录维度。

#8

As others have mentioned, css3 works nicely for this. I used full width, fixed height for the container, then scaled the image keeping aspect ratio with 'cover', then throw away the overflow:

正如其他人提到的，css3在这方面做得很好。我用全宽，固定高度为容器，然后用“cover”缩放图像保持长宽比，然后扔掉溢出:

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