全角图像中的文本和按钮答案

【问题标题】：Text And Button in Full Width Image全角图像中的文本和按钮
【发布时间】：2018-02-09 16:32:11
【问题描述】：

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

大多数方法建议使用position: absolute 设置<h2> 和<button> 的样式 - 如果您有一个图像元素并且图像始终具有相同的高度，则此方法有效，但对我来说两者都不是。

我见过的另一种方法是：

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

... 然后在其中定位元素，这可能会起作用，但如果可能的话，我想避免使用内联样式。

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

【问题讨论】：

我不认为您提出的任何一种解决方案都是骇人听闻的。关于第一个解决方案-“如果您有一个图像元素并且图像始终具有相同的高度，则此方法有效”-您只需将每组 img、h2 和按钮包装在单独的 div 中。
为什么第二个选项必须是内联样式？只需添加一个唯一的 id 或类并将样式移动到您的 CSS 文件中。
@William_Wilson 除非有什么我不知道的，否则您需要内联样式，因为每个 background-image 必须不同。如果你使用一个类，你只能有一个图像。如果您使用 ID - 您必须为每个图像创建一个单独的 ID。您仍然可以使用类/ID，但需要使用 style 内联更改 background-image。
我想我看不出定义单独图像的位置有什么区别，因为无论如何都会有单独的源信息。例如。在 img 标签、内联 div 样式或单独的 ids/classes 中。只是指出，似乎唯一强制您的内联样式是在 html 文件中定义图像源的偏好，而不是 html/css。

标签： html css image position

【解决方案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>

【讨论】：

谢谢，我现在正在尝试这种方法