我想弄清楚如何在其他两个图像相交的位置排列一个图像中心点。
基本上我正在尝试做这张照片中发生的事情。
https://d13yacurqjgara.cloudfront.net/users/488816/screenshots/1726057/1_1x.jpg
我如何使用 CSS 做到这一点?
最佳答案
有多种方法可以做到这一点,但您需要反过来考虑。换句话说,您需要调整顶部图像的中点位置,使其与上方图像的底部对齐。
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%);
}
关于css - 有没有办法调整高度以匹配另一幅图像的中点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25992311/