DEMO

Question

我试图找出如何排列其他两个图像相遇的图像中心点。

基本上我正试图在这张照片中发生什么。

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

如何使用CSS执行此操作？

Answer 1

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

DEMO

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

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属性设置为0，然后使用transform属性将图像沿y轴移动50％，而不是设置图像的高度并计算bottom属性的一半高度。因此，变换会自动考虑图像的高度。

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%);
}

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

1 个答案:

DEMO

DEMO #2