我使用Bootstrap創建輪播，我有大圖片，因此當屏幕比圖片小時，比例不會保留。維護輪播中的圖像寬高比
我怎麼能改變它？
這裏是我的代碼：
.carousel .item {
height: 500px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
我需要的圖像，以適應寬度爲100％，但保持其500像素高度（我認爲這是500像素），這應該意味着更小的屏幕上，我們沒有看到圖像的最左邊和最右邊。
我試圖包含圖像的一個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;
}
將其具有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你的小提琴更新。
刪除傳送帶項目內的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;
}
我能夠通過註釋掉從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;
}
將'height：none'加入'.carousel-inner> .item> img'適用於我 – CrandellWS
我認爲最好用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
希望這將是有用的人。
顯然，上面提到的解決方案並不適合我（我不知道爲什麼？），但我發現使用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();
}
}
這似乎爲我工作得很好。
希望它也適用於你。
您可以自己設置寬高比，也可以使用其他方法。首先，將窗口寬度和高度設置爲圖片格式良好的視圖尺寸。查詢寬度和高度，並計算出比率。將窗口返回到原始寬度和高度。用戶根本不會注意到這些變化，但尺寸會被記錄下來。
保持高寬比&轉盤格的全覆蓋：
img {
object-fit: cover;
overflow: hidden;
}
正如其他人所說，CSS3工作得很好這一點。我用容器的全寬，固定高度，然後用'cover'縮放圖像保持寬高比，然後丟棄溢出：
.carousel .carousel-inner img {
width: 100%;
height: 30em;
object-fit: cover;
overflow: hidden;
}
它的工作原理，謝謝！但是，調整頁面大小時圖像不居中，但沒關係。 – Vilarix
更好的方法是使用下面答案中所述的background-size：cover屬性。這樣，無論您如何調整屏幕大小，它都會保持圖像寬高比。 – alchuang