当图像大小改变时相对于图像定位文本

Posted 2023-03-06

【中文标题】当图像大小改变时相对于图像定位文本

【英文标题】：Positioning text relative to an image when the image size changes

【发布时间】：2012-09-05 18:44:16

【问题描述】：

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

我在想可能是带有背景图像的东西，而不是图像本身，但是我必须处理这样一个事实，即它是一个带有背景图像的空 div，所以我必须硬编码一个高度，这将'不起作用，因为其中一些图像会比其他图像高。

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

【参考方案1】：

我用更多的 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。

【参考方案2】：

我不确定我是否 100% 关注，但这里是我认为你正在尝试做的事情。

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

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

接下来，在其中创建一个内部容器，其中包含 position: absolute

.container-inner 
  position: absolute;

最后，将覆盖文本样式创建为 100% 宽度并水平居中（或者您希望它的位置）

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

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

祝你好运！

【参考方案3】：

如果你让 div 包含图片inline-block，它的宽度将缩放到其内容的大小，即你的图片。

一旦容器的大小正确，您就可以使用带有text-align: center 的包装器将其他子元素（例如标题）居中，或者使用带有auto 的包装器和左右边距的值auto。

这是一个例子：http://jsbin.com/uyajaw/3/edit（带有丑陋的边框和背景以显示东西在哪里）

点击图片调整大小，看到标题仍然居中。

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

【参考方案4】：

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

看看这个Fiddle，它显示了一个固定宽度的包装 div 和以它为中心的标题。