引導響應CSS圖像寬度歪曲和扭曲

我正在使用Bootstrap創建一個網站，該網站使用佔用大部分頁面的傳送帶組件。我發現，當我調整瀏覽器窗口的大小並水平拖動視口時，圖像寬度變得歪斜和扭曲。我爲轉盤設置了以下整體CSS樣式以及不同寬度的媒體查詢。引導響應CSS圖像寬度歪曲和扭曲

對我的CSS規則或屬性有任何修改，我可以將其應用於.carousel .item和.carousel img以防止瀏覽器窗口水平拖動時圖像的寬度變形？我在想width:100%;我可能解決這個問題？

這裏是水平調整瀏覽器時歪斜發生的歷史的圖像： enter image description here

這裏是網站：http://www.the-session.co.uk/jen/

這裏是CSS：

.carousel .item { 
    height: 900px; 
} 
.carousel img { 
    min-width: 100%; 
    height: 900px; 
} 

@media (max-width: 979px) { 

    .carousel .item { 
    height: 500px; 
    } 
    .carousel img { 
    width: auto; 
    height: 500px; 
    } 
} 


@media (max-width: 767px) { 

    .carousel .item { 
    height: 300px; 
    } 
    .carousel img { 
    height: 300px; 
    } 
}

來源

2013-02-23 user1554264

@ user15542624檢查解決方案 – Shail 2013-02-24 02:32:31

-1

與努力的問題通過這種方式縮放圖像就是不保留圖像的初始長寬比。

取而代之，嘗試background-size: contain。這指示瀏覽器按比例縮放圖像，以使圖像沿着較長軸填充容器。

來源

2013-02-23 17:23:08 Terry

這顯然只適用於背景圖像。 – 2013-07-06 07:31:09

-1

您正在設置媒體查詢中高度的錯誤值。由於在主要的CSS您的IMG高度設置爲height:900px;你需要做到以下幾點：

@media (max-width: 979px) { 

.carousel .item { 
    height: 750px; 
} 
    .carousel img { 
    width: auto; 
    height: 75 0px; 
} 
} 

@media (max-width: 767px) { 

    .carousel .item { 
    height: 600px; 
    } 
    .carousel img { 
    height: 600px; 
} 
}

來源

2013-02-24 02:31:10 Shail

的問題在於，你要定義一個特定的高度和/或寬度（取決於你的佈局）的事實，這是造成這個問題。如果您的設計允許，請在兩個@media文件中將「height：900px」從.carousel img更改爲「height：auto」，以使圖像不失真。

但是，如果想要的結果是實際上將輪播圖像展開以填充整個視口，則需要另一個解決方案，可能需要將圖像更改爲背景圖像以填充絕對定位的div。

來源

2013-05-16 18:23:33

引導響應CSS圖像寬度歪曲和扭曲

回答

相關問題