当图像大小发生变化时相对于图像定位文本

我试图想到一个聪明的方法来处理图像将要与不同图像（不同宽度，最大值）交换出来的网页的一部分宽度为620px），并且文字标题绝对定位在它上面。我想根据图像的宽度绝对定位文本，而不是相对定位的容器的宽度。当图像大小发生变化时相对于图像定位文本

我想也许是背景图像的东西，而不是一个图像本身，但然后我必须处理的事实，这是一个空的div与背景图像，所以我必须硬编码的高度，这将不起作用，因为其中一些图像会比其他图像更高。

任何解决方案，你们可以想到的将不胜感激。谢谢！

2012-09-12 Michael Vattuone

向我们展示您的html ... – krish

我不确定我是否遵循100％，但以下是我如何做认为你正在尝试做的。

创建相对位置的容器，设置你的宽度和高度，并设置溢出隐藏：

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

接下来，创建它里面的内胆，仅仅具有位置：绝对

.container-inner { 
    position: absolute; 
}

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

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

这里的jsfiddle举个例子：http://jsfiddle.net/BGvca/1/

祝你好运！

来源

2012-09-12 17:44:54

非常好，谢谢！ –

我提出以前的答案与一些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参考。

来源

2012-09-12 17:42:36

这也适用 - 我刚刚看到Matt的回答。 :) –

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

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

下面是一个例子：http://jsbin.com/uyajaw/3/edit（丑陋的边框和背景，以显示其中的东西）

点击图片来调整一下，看看还是居中的标题。

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

来源

2012-09-12 17:47:00 tuff

我不知道我是否过度思考这个问题，但是这里有一个方法。如果您不想将标题与包装div对齐，则还需要考虑imagesLoaded事件（jQuery plugin）。否则，如果未加载，您将拥有img宽度为0，或者您将在此处加载先前加载的宽度（除非您回到该宽度）。

看看这个Fiddle，它显示了一个固定宽度的包装div和集中在它上面的标题。

来源

2012-09-12 18:20:39 Scrimothy

当图像大小发生变化时相对于图像定位文本

回答

相关问题