Question

我有以下情况：

我有一个固定大小的容器。
在容器内部，我显示一个比容器大的图像（未知大小）。我想尽可能大地显示图像（但保持纵横比）。我还希望图像在容器中垂直和水平居中（到目前为止很好，我知道怎么做）
现在我希望在图像上有两个叠加（未知大小）：一个与顶部对齐，另一个与图像底部对齐。

我无法得到最后一点。如果不清楚，那么希望this demo应该有所帮助：我将叠加层与容器的顶部/底部对齐。相反，我希望它们与图像对齐。任何帮助表示赞赏！

Answer 1

position: relative不适用于表格单元格。

来自规范：http://www.w3.org/TR/CSS21/visuren.html#propdef-position

'position：relative'对table-row-group的影响， table-header-group，table-footer-group，table-row，table-column-group， table-column，table-cell和table-caption元素未定义。

因此，添加一个包装器div并将position: relative应用于该代码：

http://jsfiddle.net/B9Le8/5/

<div id="container">
    <div> <!-- the wrapper -->
        <img id="img" src="http://lh5.ggpht.com/-J7Q7cUDEFOU/S_bKEoyMSzI/AAAAAAAAGIw/PZJduitsVa0/largeNewGoogleLogoFinalFlat-a.png" />
        <div class="overlay" id="top">Overlay top</div>
        <div class="overlay" id="bottom">Overlay bottom</div>
    </div>
</div>

#container > div {
    position: relative;
}

Answer 2

我认为您应该将图片放在<DIV>中并在其中设置style="background:url()"。然后在DIV中，放置您想要定位的DIV。它应该更容易。

相对于图像定位块

2 个答案: