Question

我有一个背景图像，需要调整其大小和保持宽高比（包含），并使其中的文本与调整大小时保持在图像中的同一级别。

.skyimage {
    width: 100%;
    height: 841px;
    background: url("image.png");
    background-size: contain;
    background-repeat: no-repeat;
}

定位文本以使其在调整大小时与图像中的同一点保持尽可能一致的最佳方法是什么？

Answer 1

这是您要完成的事情吗？

.container {
    position: relative;
    text-align: center;
    color: white;
}

/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="container">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%;">
  <div class="centered">CenteredCenteredCenteredCenteredCenteredCenteredCenteredCentered</div>
</div>

Answer 2

您要在哪里对齐文本？您可以尝试使用flexbox并使用：

- My Teammate's company account
- and I

（抱歉，我的手机无法摆弄小提琴

使用背景图片调整div大小时，保持文本正确定位：

2 个答案: