引導3文本中的集裝箱在整個寬度圖像

所以我的繪畫藝術家想出了，我有拿出一個乾淨的解決方案麻煩的佈局。基本上他們想要一個全角的響應式圖像，並在其上面有文字。但文本必須左對齊，並且適合在div中，而不是全寬。我還需要照顧手機/平板電腦/等。所以我必須確保字體大小也適用於所有設備（因此字體在JQuery/JS中調整大小）。引導3文本中的集裝箱在整個寬度圖像

所以我只是想知道如果我這樣做的最有效的方式。我覺得bootstrap應該有一些東西來解決這個問題，我只是錯過了，但這是我可以想出的最好的解決方案（警告：代碼仍然是一個工作進行中，不討厭我貧窮的JS/JQuery = d）

因此，這裏是我的BootPly與解決方案，我想出了： http://www.bootply.com/bdS9H3otpi

我希望有人會喜歡，男孩哦，這是矯枉過正只是做X，但對我來說我的生活想不出X會是什麼。

P.S.我的問題基本上由我自己回答，我只是希望有一個更清潔的解決方案。如果沒有人能拿出一個我只是清理的JQuery/Javascript代碼並把它作爲是

來源

2015-12-23 Rob R.

首先是所有的JS在Firefox沒有工作，什麼JS的做，你可以通過CSS實現...我工作的小提琴現在張貼的答案...順便說一句設計不值得所有這些努力中...手機和平板電腦的圖像，如果用bg顏色代替它，圖像效果會更好。 –

首先是沒有必要的JS。

1-主要部分把圖像回地面和文本標題（H1）

2 - 爲響應只使用CSS

例如

#newsHeaderTitle{ 
    color:white; 
    height:100%; 
    margin:0; 
    font-size:350%; 
    line-height:350%; 
} 
/* image BG image */ 

@media only screen and (max-width : 1200px) { 
    #newsHeaderTitle{font-size:350%;line-height:300%;} 
} 

@media only screen and (max-width : 992px) { 
    #newsHeaderTitle{font-size:300%;line-height:350%;} 
} 

@media only screen and (max-width : 768px) { 
    #newsHeaderTitle{font-size:200%;line-height:350%;} 
    /* image BG tablet image */ 
} 

@media only screen and (max-width : 480px) { 
    #newsHeaderTitle{font-size:100%;line-height:100%;} 
    /* image BG mobile image */ 
}

嘗試使用所有EM中的高度和大小優於％不要在html中添加CSS。

來源

2015-12-23 06:43:33

因此，我只是爲不同的屏幕尺寸添加不同大小的標題圖像？什麼時候他們之間的屏幕尺寸（即：調整桌面上的瀏覽器窗口）？ –

我們做響應圖像的原因是加載在手機和平板電腦的數據較少......有關桌面，你將有3個圖像 2-爲1320 3- 1000 我建議讓他們連1 如此你將有總計一個大圖像，一個平板電腦，一個手機。 –

我編輯了我的答案，只顯示3張圖片 –

引導3文本中的集裝箱在整個寬度圖像

回答

相關問題