Html 在旋转木马中保持图像纵横比

我正在使用引导创建一个旋转木马，我有大的图像，所以当屏幕小于图像时，比率不会保持不变

我怎样才能改变这一点

这是我的密码：

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

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



    }

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

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

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

但它不起作用

---

谢谢大家!

问题在于引导CSS：

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

已设置<代码>最大宽度：100%图像不会比视口大。您需要在CSS上覆盖该行为：

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

注意

最大宽度：无添加在底部。这是默认的最大宽度值并取消限制

您的小提琴已更新。
删除旋转木马项目内的
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;
}

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

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

这段代码终于对我起作用了：

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

我认为最好使用CSS3
objectfit
属性来处理它

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

例如：

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

您可以在此处找到更多详细信息：

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

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

这是我的密码：

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

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



    }

var aspectRatio=2.5//宽度到高度！！！
var图像宽度；
var图像高度；
//将窗口调整大小事件绑定到方法-
//旋转木马宽度的更改仅在视口大小更改时触发
$（窗口）。打开（“调整大小”，methodToFixLayout）；
//调整窗口大小时更新旋转木马宽度
函数方法固定布局（e）{
imageWidth=carousel.width（）；
控制台日志（“”）；
console.log（“方法宽度”+图像宽度）；
控制台日志（“”）；
图像高度=图像宽度/纵横比；
转盘容器高度（图像高度）；
转盘高度（图像高度）；
转盘高度（图像高度）；
//解决小视口的旋转木马故障-删除旋转木马
windowWidth=$（window.width（）；
如果（窗宽<840）{
carousel.hide（）；
$（“#侧导航栏”）.hide（）；
}否则{
carousel.show（）；
$（“#侧导航栏”）.show（）；
}
}

它似乎对我很管用

希望它对你也有用

您可以自己设置纵横比，也可以使用其他方法。首先，将窗口宽度和高度设置为图片格式良好的视图尺寸。查询宽度和高度，并计算出比率。将窗口恢复到原始宽度和高度。用户根本不会注意到更改，但会记录尺寸。
为了保持旋转木马分区的纵横比和全覆盖率：

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

正如其他人提到的，css3可以很好地实现这一点。我使用了容器的全宽、固定高度，然后用“cover”缩放图像保持纵横比，然后扔掉溢出物：

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

这些答案中的大多数都已经足够老了，它们只适用于bootstrap3。这是Bootstrap 4的一个解决方案，它不仅保留了相同的纵横比，而且将图像放入旋转木马中，使图像尽可能大而不失真。这可以防止旋转木马在具有不同纵横比的幻灯片之间转换时“跳跃”

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

要更改转盘的纵横比，请更改
div.stretchy-wrapper的
padding top
属性。请注意，图像是通过设置每个
.carousel项目的
背景图像
属性来指定的，这与引导标准略有不同，但仍然可以很好地工作



/*https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_aspect_ratio_169 */
弹力包装袋{
背景颜色：绿色；
位置：相对位置；
宽度：100%；
填充顶部：56.25%；/*16:9纵横比*/
}
div.stretchy-wrapper>div{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
背景尺寸：包含；
背景重复：无重复；
背景位置：中心；
}

它很有效，谢谢！但是，调整页面大小时，图像不居中，但这并不重要。更好的方法是使用背景大小：封面属性，如下面的答案所述。这样，无论您如何调整屏幕大小，它都将保持图像纵横比。将
高度：无添加到
。旋转木马内部>.item>img
适用于我如果需要最大高度500px？
对象适合：包含为我解决了这个问题。非常感谢。使用bootstrap提供的示例，效果非常好