Twitter Bootstrap旋转木马图像比例

我正在寻找使用bootstrap创建轮播。我希望图像（具有不同的宽度和高度）以固定的比例显示，。我尝试使用CSS的所有内容都会中断并且图像比率会中断并继承传送带的大小。Twitter Bootstrap旋转木马图像比例

CSS

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

}

html代码：

<div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
     <div class="active item"> 
     <img src="image1.jpg"/> 
     </div> 
     <div class="item"> 
     <img src="image1.jpg"/> 
     </div> 
     </div> 
    </div>

我应该寻找，保持图像的比或有解决方法的另一个旋转木马的解决方案？

编辑1：

.carousel .item > img { 
     max-width: 100%; 
     height: 100%; 
     width: auto; 
     text-align: center; 
     margin: 0 auto; 

    }

来源

2013-08-02 The Other Guy

你是什么意思是什么呢？你想将图像拉伸到容器大小还是只填充宽度？ –

是不是你想要做什么？宽度为100％，高度如下？

.carousel .item > img { 
    min-width: 100%; 
    height: auto; 
}

来源

2013-08-02 23:22:03 L105

好吧，我解决了这个问题，一个固定的高度和自动宽度。 –

新的系统启动4旋转木马不会兑现height:auto修复，因为它使用Flexbox的，所以你必须计算比例的元素，在大多数情况下，初始尺寸是未知的高度，所以你必须使用JS来计算或使用位置绝对的图片并打开蠕虫新能，但如果你正在寻找一个肮脏的修复，我建议这个

.carousel-item img { 
     width: 100%; 
     height: 68vw; /* play with this */ 
    }

演示https://codepen.io/nodws/pen/gRozMM

来源

2017-06-29 17:15:48 nodws

Twitter Bootstrap旋转木马图像比例

回答

相关问题