フルサイズのテキストとボタン画像

Question

私は複数の全幅<img>のページを持っています - それぞれの画像に<button>と<h2>を重ねる必要があります。画像にはさまざまな高さがあるため、幅と高さで設定された周長に準拠する必要がある要素があります。 position: absoluteで

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> - あなたは一つの画像要素を持っているとあれば、これは動作します：

画像は、このようにスタイル設定されイメージは常に同じ高さですが、どちらも私の場合はありません。

私が見てきた別のアプローチ

のようなもの作っている：

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