Bootstrap3非整數寬度和響應圖像

我很想知道如何解決以下問題。Bootstrap3非整數寬度和響應圖像

使用引導3與24列和網格陰影30px。在寬屏顯示中，我使用col-7作爲側邊欄左側，col-17作爲主要內容。問題是bootstrap是用百分比計算寬度。所以我有339.5px（29.16667％）的側邊欄和824.484px（70.83333％）的內容。

<div class="row"> 
 
    <aside class="col-lg-7">[sidebar]</aside> 
 
    <div class="col-lg-17">[main content]</div> 
 
</div>

現在，我使用一些腳本像lazysizes和lazyaspectratio懶加載我的照片，並有圖像容器保持相同的尺寸，即使圖像尚未加載。用lazyaspectratio，寬度必須是100％才能重新計算要保留的高度。

但是...因爲有一個可以...如果我的主要內容是824.484px寬度，圖片寬度也是824.484px，並且圖片質量不好。假設我的圖片顯示必須是824px，最終的圖片顯示效果很差，即使比例受到尊重，我的質量也會下降。

我的問題是：如何繞過img> width = 100％這個問題？

我在幾個線程看到人們「修復」行兒的寬度，這樣的：

div.row > aside.col-lg-7 { 
 
    width: 340px; 
 
} 
 
div.row > div.col-lg-17 { 
 
    max-width: 824px; 
 
}

這似乎是一個很好的解決方案，以保持IMG>寬度= 100％並有整數列的寬度，但有了這個解決方案，我必須添加大量的css規則來管理多個col- *和多個媒體查詢...

而你呢？你如何解決這類問題？因爲我認爲使用寬度= 100％的img-responsive類會導致基於Bootstrap 3的基於百分比寬度的質量損失...我相信我不是唯一遇到此問題的人。

在此先感謝您的任何建議。

來源

2015-10-23 titouille

'COL-17'每個圖像元素??? Bootstrap有12列的佈局。 –

Bootstrap可以定製爲有更多的網格等...將最大寬度：注意工作呢？我不明白你的問題嗎？ – AdamJeffers

安德烈斯：http://getbootstrap.com/customize/

titouille：您可以在自定義引導您可以創建一個Javascript是向下取整根據自己的班級和家長的圖像寬度。

對於在鞍部或親本的寬度讀取並設置它（rouded下降到1個像素），因爲它的最大寬度

來源

2015-10-23 12:56:31

對於Andrejs：就像我說過的，基於$ grid-columns = 24，所以17 + 7 = 24.對於AdamJeffers：使用max-width是個好主意，我沒有意識到它優先考慮寬度值。解決方案可以在寬屏幕，普通屏幕和平板電腦模式下設置最大寬度（因爲移動設備在所有情況下均使用100％寬度）。對於Alari：如果不使用JavaScript來重置尺寸會更好。 – titouille

我相信你已經使用javascript來設置使用lazysizes和lazyaspectratio時的尺寸，這就是爲什麼我提出這個:) –

Bootstrap3非整數寬度和響應圖像

回答

相關問題