Question

我希望有一个可缩放的横幅（图片），里面有文字。

这就是我的尝试：

1）

width: 100%;
height:auto;

=＆GT;缺点：您不能将其他元素放入img元素中。

2）

background: url("../img/banner.jpg") no-repeat center center;
width: 1920px;
height: 400px;

=＆GT;缺点：图像无法缩放

3）

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

=> Disadvantage: Image does not scale

4）

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

=＆GT;缺点：图片消失

我希望你理解我的问题。有没有专业的解决方案来解决我的问题？它不一定是CSS解决方案。 JavaScript也是可能的。

Answer 1

基本上，如果您将图片用作background，请尝试background-size: cover。它会将图像缩放到容器的整个宽度和高度，保持比例，但会稍微重新定位图像。

另一种选择是使用<img>和object-fit将其放入父元素中。要将文本放在其上，您可以将父元素位置设置为relative，将text元素位置设置为absolute。

类似的东西：

<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>

有关background-size的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size。

object-fit：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Answer 2

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

所以我使用可缩放图像并将文本包装在 div.banner_text 上，然后使用 position：absolute ，以便我放在它上面的每个文本或其他html元素将被放置在图像上方。

HTML

<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>

CSS

.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;
}

如何在横幅上整合横幅（图片）和文字

2 个答案: