Javascript 如何将横幅（图片）与横幅上的文本集成

我想有一个可缩放的横幅（图片）与文字在它

这就是我尝试过的：

(一)

=>缺点：您不能将其他元素放入img元素中

(二)

=>缺点：图像无法缩放

(三)

(四)

=>缺点：图片消失

我希望你能理解我的问题。有没有专业的解决方案来解决我的问题？

---

它不一定是CSS解决方案。JavaScript也是可能的。

基本上，如果您将图像用作

背景

，请尝试

背景大小：封面

。它会将图像缩放到容器的全宽和全高，保持比例不变，但会稍微重新定位图像

另一个选项是使用

和

对象拟合

将其拟合到父元素中。要将文本置于其上方，您可以将父元素位置设置为

相对

，将

文本

元素位置设置为

绝对

比如：

<div class="parent"> <!-- this element should have position relative ->
   <img /> <!-- image with height, width equal to parent and object fit to scale -->
   <p>[TEXT]</p> <!-- text element with position absolute and proper z-index so it stay on top of the image -->
</div>

[文本]

有关背景大小的详细信息：

---

和

对象匹配

：

基本上，如果您使用图像作为

背景

，请尝试

背景尺寸：封面

。它会将图像缩放到容器的全宽和全高，保持比例不变，但会稍微重新定位图像

另一个选项是使用

和

对象拟合

将其拟合到父元素中。要将文本置于其上方，您可以将父元素位置设置为

相对

，将

文本

元素位置设置为

绝对

比如：

<div class="parent"> <!-- this element should have position relative ->
   <img /> <!-- image with height, width equal to parent and object fit to scale -->
   <p>[TEXT]</p> <!-- text element with position absolute and proper z-index so it stay on top of the image -->
</div>

[文本]

有关背景大小的详细信息：

---

和

对象匹配

：

我喜欢使用图像作为设置横幅大小的元素。如果将其用作背景图像，则必须设置div.banner的高度，否则其高度将仅为文本的高度

因此，我使用可缩放图像，将文本包装在div.banner\u text上，并使用position:absolute，这样，我放在上面的每个文本或其他html元素都将放置在图像上方

HTML

---

我喜欢使用图像作为设置横幅大小的元素。如果将其用作背景图像，则必须设置div.banner的高度，否则其高度将仅为文本的高度

因此，我使用可缩放图像，将文本包装在div.banner\u text上，并使用position:absolute，这样，我放在上面的每个文本或其他html元素都将放置在图像上方

HTML

---

文本是覆盖还是直接位于图像下方。你能用油漆做一个模型吗？这是一个覆盖层。文本位于图像的中心。文本是覆盖的还是图像的正下方。你能用油漆做一个模型吗？这是一个覆盖层。文本在图像的中心。我试过了，但没用。当我调整浏览器窗口的大小时，文本将从图像中消失。我在这里给了你们一个例子，基本上，如何用css定位你们的元素是一个更广泛的话题。我已经试过了，但没有成功。当我调整浏览器窗口的大小时，文本将从图像中消失。我在这里给了你们一个例子，基本上，如何用css定位你们的元素是一个更广泛的话题。

background: url("../img/bannerjpg") no-repeat center center;
width: 100%;
height: 400px;

=> Disadvantage: Image does not scale

background: url("../img/banner.jpg") no-repeat center center;
width: 100%;
height: auto;

<div class="parent"> <!-- this element should have position relative ->
   <img /> <!-- image with height, width equal to parent and object fit to scale -->
   <p>[TEXT]</p> <!-- text element with position absolute and proper z-index so it stay on top of the image -->
</div>

<div class="banner">
    <img src="banner.jpg" alt="">
    <div class="banner_text">
        <h1>Bla bla bla</h1>
        <p>bla bla bla bla bla bla bla bla.</p>
    </div>
</div>

.banner {
    position: relative;
}

.banner img {
    width: 100%;
    height: auto;
    float: left;
    clear: left;
}

.banner_text {
    width: 100%;
    padding: 20px; /* or whatever you want */
    position: absolute;
    left: 0;
    bottom: 0; /* for banners like that I like to position the text from the bottom, but it's up to you */
    z-index: 10;
}