容器内的 Bootstrap 3 文本在全角图像上

Question

所以我的图形艺术家想出了一个布局，但我无法想出一个干净的解决方案。基本上他们想要一个全角的响应式图像，上面有文字。但是文本必须左对齐并适合container div，而不是全宽。我还需要照顾手机/平板电脑/等。所以我必须确保字体大小也适用于所有设备（因此在 JQuery/JS 中调整字体大小）。

所以我只是想知道我是否以最有效的方式执行此操作。我觉得引导程序应该有一些东西可以解决这个问题，而我只是错过了它，但这是我能想到的最好的解决方案（警告：代码仍在进行中，不要因为糟糕的 JS/JQuery 而恨我=D)

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

我希望有人会像，哦，男孩，那是个矫枉过正的男孩，只做 X，但对于我的一生，我无法想象 X 会是什么。

附：我的问题基本上是由我自己回答的，我只是希望有一个更清洁的解决方案。如果没有人想出一个，我将清理 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。