Twitter Bootstrap傳送帶圖像出現扭曲

Question

我正在構建一個基於Twitter Bootstrap主題的網站：http://demo.graphikaria.com/agilis/theme。

每當我減少瀏覽器的寬度時，主頁輪播的背景圖像就會變形。

對於模板使用的默認褪色背景圖像，這不是什麼大問題，但如果您想要使用清晰的圖像或徽標，則會出現扭曲或擠壓。

Answer 1

您有：

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

更改高度100%。

Answer 2

在Chrome瀏覽器中，默認max-width: 100%似乎是而不是是你想要的。

在您的CSS中，您可以添加到已定義的規則中以使瀏覽器使用默認設置。

.carousel .item > img { max-width: none } 

值得一提的是，您所指定min-width: 100%以絕對height結合，使大屏幕上（像我這樣的，這是1080），它仍然會扭曲的形象，如果它變得太寬，從而改變長寬比並再次扭曲圖像。

Answer 3

如果您使用IMG標籤，它將始終不會比其容器DIV更寬。由於引導程序爲流體佈局重新調整了固定圖像的大小，特別是在移動設備上，圖像被壓縮到屏幕寬度。

另一種似乎對我而言效果很好的替代方法是使用帶背景圖像的<div>標記。

類：

.carousel-inner > .item > .carousel-image { 
    width: 100%; 
    height: 500px; 
    text-align: center; 
    align: center; 
} 

物品代碼：

#csl-item1 { 
    background:url(img/carousel_image1.jpg); 
    background-repeat: no-repeat; 
    background-position: center top; 
} 

的項目：

<div class="item active"> 
    <div id="csl-item1" class="carousel-image">&nbsp;</div> 
    <div class="container"> 
    <div class="carousel-caption"> 
     <!-- Caption --> 
    </div> 
    </div> 
</div> 

我很好奇，看看是否有人有任何與此錯誤方法壽，所以讓我知道如果你認爲它是一個壞主意......

Answer 4

OK，我能做的最好的是這樣的......

/* Carousel base class */ 
.carousel { 
    height: auto; 
    margin-bottom: 60px; 
} 
/* Since positioning the image, we need to help out the caption */ 
.carousel-caption { 
    z-index: 35; 
} 

/* Declare heights because of positioning of img element */ 

.carousel .item { 
    background:#e64c6c; 
    border:.5px solid #e7c1af; 
    overflow:hidden; 
    padding:3px; 
    min-height: 500px; 
} 
.carousel-inner > .item > img { 
    float:right; 
    padding: 2px; 
    padding-left: 3px; 
    min-width: 500px; 
} 

.carousel-inner > .item > img:hover { 
    border: 1px solid #e7c1af; 
} 

Answer 5

我發現在幻燈片中添加此CSS的圖像的乾淨的解決方案：

object-fit: cover; 
overflow: hidden; 

你甚至可以只添加它內嵌到img標籤：

<img style="object-fit: cover; overflow: hidden;" class="first-slide" src="/images/beach.jpg" alt="sunny day at the beach"> 

有一個偉大的寫了，顯示CSS3屬性的例子，它們對圖像縱橫比在這裏的影響：http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

Answer 6

With bootstrap 3.3。7，我可以通過簡單地在這裏carousel.css去掉「高度」行解決這個問題：

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

Answer 7

在我的情況下，當屏幕尺寸增加了圖像失真。我正在使用Bootstrap 4開始啓動一個Bootstrap免費模板（https://startbootstrap.com/）。

根據以上Ira Iraman的回答（如果我有足夠的信用積分，我會發表評論），我最終得到了下面的代碼解決我的問題：

.carousel-item { 
 
    height: 32rem; 
 
    background-color: #777; 
 
} 
 
.carousel-item > img { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    min-width: 100%; 
 
    height: 32rem; 
 
    object-fit: cover; 
 
    overflow: hidden; 
 
    object-position: 20% 19%; 
 
}

對象位置的X和Y座標可以根據經過調整要如何增加圖像，減少。調整從右側的圖像也有助於我的情況。我希望有所幫助。