容器內的 Bootstrap 3 文本在全角圖像上

Question

所以我的圖形藝術家想出了一個布局，我在想出一個干凈的解決方案時遇到了麻煩。 基本上他們想要一個全寬的響應式圖像，上面有文字。 但是文本必須左對齊並適合container div，而不是全寬。 我還需要照顧手機/平板電腦/等。 所以我必須確保字體大小也適用於所有設備（因此在 JQuery/JS 中調整字體大小）。

所以我只是想知道我是否以最有效的方式來做這件事。 我覺得 bootstrap 應該有一些東西可以解決這個問題，而我只是錯過了它，但這是我能想到的最好的解決方案（警告：代碼仍在進行中，不要因為糟糕的 JS/JQuery 而恨我=D)

所以這是我的 BootPly 和我想出的解決方案： http : //www.bootply.com/bdS9H3otpi

我希望有人會像，哦，男孩，只是做 X 就矯枉過正了，但對於我的生活，我無法想象 X 會是什么。

PS我的問題基本上是由我自己回答的，我只是希望有一個更清潔的解決方案。 如果沒有人能想出一個我只會清理 JQuery/Javascript 代碼並按原樣使用它

Answer 1

首先不需要 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 更好。