Question

我有一个页面，其中我有多个全宽<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>

全宽图像中的文本和按钮

1 个答案: