尽管调整了图像大小，图像上的文本仍保持原位答案

【问题标题】：Text on Image stays in place despite image resizing尽管调整了图像大小，图像上的文本仍保持原位
【发布时间】：2013-05-14 06:24:55
【问题描述】：

我做了一个包含三张图片的快速网页设计。

随着浏览器尺寸的减小，图片也会缩小，因此它们都保持在可见范围内。

现在我尝试在这些图像上放置文字，但文字会随着浏览器大小的调整而移动。

基本上，我希望文本始终停留在图片上的一个位置，因为图片尺寸会减小。

这里是 JSFIDDLE：http://jsfiddle.net/JwGuR/

您会注意到文本甚至不在图像上，因为窗口很小。尝试使窗口更大，文本将进入图像。无论浏览器大小如何，我都希望文本保持原位。

这是文本的 CSS：

.imgText {
    display: inline-block; 
    text-align: center; 
    margin: 0; 
    padding: 250px 0 0 200px; 
    position: absolute;
    font-size: 25px;
    width: auto;
    height: auto;
    color:white;
}

【问题讨论】：

似乎在 FF 中工作。
自动图像大小调整在 FF 中不起作用。看看 JSFiddle。我希望图像根据浏览器大小调整大小，他们会这样做。现在我需要文本来做同样的事情。
@MrLister 感谢您指出这一点。但这仍然不能解决我的问题。编辑：现在看到你的新答案。
@MrLister 我尝试将每个带有文本的图像放在它们自己单独的 div 中，但由于某种原因，它通过垂直设置图像而不是水平设置图像来搞乱网站。我认为这就是您将它们放在同一个元素中的意思？
不，我没有使用任何 HTML5，所以没关系。但据我所知，没有将最大宽度限制为最小最大宽度的属性。嗯，那将是最小-最大-宽度。不，你当然可以用媒体查询来做一些事情......

标签： css html resize font-size

【解决方案1】：

这正是你想要的：http://jsfiddle.net/MrLister/JwGuR/10/

<div class="figure">
    <div class="figcaption">Text1</div>
    <img src="path/to/image">
</div>

（或者您可以使用真正的 HTML5 并使用实际的 <figure> 和 <figcaption> 元素。）

CSS：

.figure {
    position: relative;
    display: inline-block;
    max-width: 33%;
}

.figure .figcaption {
    text-align: center; 
    width:100%; height:0;
    font-size: 25px; line-height: 0;
    color:white;
    position:absolute; top:50%;
    z-index:1;
}

.figure img {
    display:block;
    max-width: 100%; 
}

如果需要，您还可以通过为 .figure 元素指定 float:left 来丢失图像之间的空白。（并在之后执行clear）。

【讨论】：