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

Posted 2023-03-06

【中文标题】容器内的 Bootstrap 3 文本在全角图像上

【英文标题】：Bootstrap 3 text inside container over full-width image

【发布时间】：2016-03-29 11:43:48

【问题描述】：

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

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

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

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

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

【问题讨论】：

首先，JS 不能在 firefox 中工作，而 JS 正在做什么你可以通过 CSS 实现......我正在研究小提琴，现在将发布答案......顺便说一句，设计不值得这一切努力...在手机和平​​板电脑中，如果将其替换为 bg 颜色，则图像完全不显示。

【参考方案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) 
    #newsHeaderTitlefont-size:350%;line-height:300%;


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


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


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

尝试在 EM 中使用所有高度和尺寸，它比 % 更好 不要在 html 中添加您的 CSS。

【讨论】：

所以我只是为不同的屏幕尺寸添加不同尺寸的标题图像？当它们在屏幕尺寸之间（即：在桌面上调整浏览器窗口的大小）时呢？

我们做响应式图片的原因是在移动设备和平板电脑上加载更少的数据......关于桌面你将有 3 张图片 1- 1920 2- 1320 3- 1000 我建议让它们均匀1 这样您就可以拥有一张大图、一部平板电脑、一部手机。

听起来不错。我知道我想多了！谢谢 J. Tural