html - 全宽图像中的文本和按钮

Question

我有一个页面，其中有多个全 Angular <img>的 - 我必须添加一个 <button>和 <h2>叠加在每个图像上。图像将具有可变高度，因此其中的元素需要符合由其宽度 + 高度设置的周长。

图像的样式是这样的:

CSS

.FullWidthImg {
   width: 100vw;
   position: relative;
   left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
}

HTML

<div id="container"> <!--ONLY STYLING FOR container IS position: relative-->
  <img src="xx" alt="xx" style="FullWidthImg"/>
  <h2>TEXT GOES HERE</h2>
  <button>i'm a button</button>
</div>

大多数方法建议样式 <h2>和 <button>与 position: absolute - 如果您有一个图像元素并且图像始终具有相同的高度，则此方法有效，但对我来说情况并非如此。

我见过的另一种方法是:

<div style="background-image: url(/img.com)">
  <h2>TEXT GOES HERE</h2>
  <button>i'm a button</button>
</div>

...然后在其中定位元素，这可能会起作用，但我想尽可能避免内嵌样式。

是否有任何替代方法适用于此用例？

Answer 1

根据您的第一个建议，以下是您如何在没有内联样式的情况下完成所需的布局。

.img-wrapper {
  position: relative;
}

.img-wrapper img {
  width: 100%;
}

.img-wrapper .overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.img-wrapper h2 {
  margin: 0 0 .5em;
}

<div class="img-wrapper">
  <img src="http://via.placeholder.com/600x150/eee/ddd" />
  <div class="overlay">
    <h2>Heading</h2>
    <button>Button</button>
  </div>
</div>

<div class="img-wrapper">
  <img src="http://via.placeholder.com/600x400/eee/ddd" />
  <div class="overlay">
    <h2>Heading</h2>
    <button>Button</button>
  </div>
</div>