引导3文本在容器内的全宽图像

Bootstrap 3 text inside container over full-width image

本文关键字：图像 文本 引导      更新时间：2023-09-26

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

所以我只是想知道我是否以最有效的方式来做这件事。我觉得bootstrap应该有办法解决这个问题，但我只是错过了它，但这是我能想到的最好的解决方案（警告：代码仍在进行中，不要因为糟糕的JS/JQuery=D而讨厌我）

下面是我的BootPly和我提出的解决方案：http://www.bootply.com/bdS9H3otpi

我希望有人会说，哦，天哪，做X太过分了，但就我而言，我想不出X会是什么。

附言：我的问题基本上是自己回答的，我只是希望有一个更清洁的解决方案。如果没有人能想出一个，我只会清理JQuery/Javascript代码，并按原样使用

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

相关文章：