相对于图像定位块 [英] Positioning blocks relative to an image
问题描述
我有以下情况:
- 我有一个固定大小的容器。
- 容器内部显示比容器大的图像(尺寸未知)。我想显示尽可能大的图像(但保持宽高比)。我还希望图像在容器中垂直和水平居中(迄今为止非常好,我知道该怎么做)
- 现在我想要有两个叠加层(未知大小)图像:一个与顶部对齐,另一个与图像底部对齐。
我无法获得最后一点。如果不清楚,那么希望这个演示应该有所帮助:在那里,我将覆盖图与顶部/底部的容器。相反,我希望它们与图像对齐。
从规格: http://www.w3.org/TR/CSS21/visuren.html#propdef-position
在表行集合上的'position:relative'的作用,
table-header-group,table-footer-group,table-row,table-column-group,
table-column, table-cell和table-caption元素是未定义的。
因此,添加一个包装 div
并将位置:相对
应用于此:
< div id =container>
< div> <! - 包装 - >
< img id =imgsrc =http://lh5.ggpht.com/-J7Q7cUDEFOU/S_bKEoyMSzI/AAAAAAAAGIw/PZJduitsVa0/largeNewGoogleLogoFinalFlat-a.png/>
< div class =overlayid =top> Overlay top< / div>
< div class =overlayid =bottom>覆盖底部< / div>
< / div>
< / div>
#container> div {
position:relative;
}
I have the following situation:
- I have a container of a fixed size.
- Inside the container I display an image (of unknown size) that is bigger than the container. I want to display the image as big as possible (but keeping the aspect ratio). I also want the image to be vertically and horizontally centered in the container (so far so good, I know how do that)
- Now I want to have two overlays (of unknown size) over the image: one aligned with the top and one with the bottom of the image.
I cannot get the last point right. If it's unclear then hopefully this demo should help: there I have the overlays aligned with top/bottom of the container. Instead I want them aligned with the image. Any help appreciated!
position: relative
does not work on table cells.
From the spec: http://www.w3.org/TR/CSS21/visuren.html#propdef-position
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
So, add a wrapper div
and apply position: relative
to that instead:
<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;
}
这篇关于相对于图像定位块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!