Question

我正在尝试一种聪明的方法来处理网页的一部分，其中图像将被换出不同的图像（宽度不同，最大宽度为620px），文字标题绝对是定位在它上面。我希望文本根据图像的宽度绝对定位，而不是相对定位的容器的宽度。

我想的可能是背景图像，而不是图像本身，但后来我必须处理它是一个带有背景图像的空div的事实，所以我必须硬编码高度，这不会因为其中一些图像会比其他图像高一些。

你们能想到的任何解决方案都将不胜感激。谢谢！

Answer 1

我不确定我是否遵循100％，但这里是如何做我认为你想要做的事情。

使用位置相对创建容器，设置宽度和高度，并将溢出设置为隐藏：

.container-outer {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

接下来，在其中创建一个内部容器，它只有位置：absolute

.container-inner {
  position: absolute;
}

最后，将叠加文字样式创建为100％宽度并水平居中（或者您希望将其定位）

.overlay {
  position: absolute;
  text-align: center;
  width: 100%;
  margin: 0;
}

以下是带有示例的jsfiddle：http://jsfiddle.net/BGvca/1/

祝你好运！

Answer 2

我用更多CSS

提出了上一个答案

<div class="imageholder">
    <div class="caption">Simon &amp; Garfunkel</div>
    <img src="http://greenobles.com/data_images/simon-and-garfunkel/simon-and-garfunkel-03.jpg">
</div>

.imageholder{
    position: relative;
    float: left;
}
.caption{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-family: Helvetica,sans-serif;
    font-size: 1em;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 1em 2em;
}

请参阅jsFiddle以供参考。

Answer 3

如果您创建包含图像inline-block的div，其宽度将缩放到其内容的大小，即您的图像。

一旦容器正确调整大小，您可以使用text-align: center的包装器将其他子元素（如标题）置于其中，或者左侧和右侧边距不包含auto的包装和值

以下是一个示例：http://jsbin.com/uyajaw/3/edit（边框和背景难看以显示内容）

单击图像以调整其大小，并看到标题仍然居中。

请注意，如果您的标题可能比图片大，则可能会扩展容器div的宽度，从而丢弃中心对齐方式。你可以通过在标题上设置position: absolute; left: 0; right: 0;，或者给它一个你知道总是小于你的图像的宽度来避免这种情况。

Answer 4

我不知道我是否过度思考，但这是一种方法。如果您特别不想将标题与包装div对齐，那么您还需要考虑imagesLoaded事件（jQuery plugin）。否则，如果未加载，您将具有img宽度为0，或者您将具有先前加载的img宽度（除非您返回到它）。

看看这个Fiddle，它显示了一个固定宽度的包装div，并且标题位于其上。

在图像大小更改时相对于图像定位文本

4 个答案: