css - 有没有办法调整高度以匹配另一幅图像的中点？

Question

我想弄清楚如何在其他两个图像相交的位置排列一个图像中心点。

基本上我正在尝试做这张照片中发生的事情。

https://d13yacurqjgara.cloudfront.net/users/488816/screenshots/1726057/1_1x.jpg

我如何使用 CSS 做到这一点？

Answer 1

有多种方法可以做到这一点，但您需要反过来考虑。换句话说，您需要调整顶部图像的中点位置，使其与上方图像的底部对齐。

DEMO

假设您在一个包含的 div 中有两个图像，并且您知道顶部较小图像的大小，您可以绝对定位较小图像并将较小图像的 bottom 属性设置为其高度的一半:

HTML:

<div class="image-group">
    <img src="http://placehold.it/800x300/e8117f/fff&text=Big%20Image" alt="Big Image" class="big-image" />
    <img src="http://placehold.it/300/9acd32/fff&text=Small%20Image" alt="Small Image" class="small-image" />
</div>

CSS:

.image-group {
    position: relative;
}
.big-image {
    display: block;
    width: 100%;
}
.small-image { 
    height: 250px;
    position: absolute;
    bottom: -125px; /*half the height of itself*/
    left: 0;
    right: 0;
    display: block;
    margin: auto;
}

解决此问题的另一种方法是您可以使用变换。这里的优点是您不需要知道图像高度。一个潜在的缺点是 IE8 或 Opera-Mini 不支持 transform 属性(如果您关心这些浏览器)。此外，转换仍然需要前缀才能在许多浏览器上工作。此示例使用与上面完全相同的 html。无需设置图像的高度并为 bottom 属性计算高度的一半，只需将 bottom 属性设置为 0，然后使用 transform 属性将图像沿 y 轴移动 50%。因此，转换会自动考虑图像的高度。

DEMO #2

CSS:

.image-group {
    position: relative;
}
.big-image {
    display: block;
    width: 100%;
}
.small-image { 
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    margin: auto;
    -webkit-transform: translate(0, 50%);
    -ms-transform: translate(0, 50%);
    transform: translate(0, 50%);
}