垂直拉伸div以適合內容

Question

如何使.welcome-content-wrap類拉伸以適應其內容並仍保持我給出的透明樣式？

我明白，你通常不會添加背景圖片像我有但就是爲什麼我做它像我有一個理由

.welcome-section{ 
 
\t position: relative; 
 
} 
 

 
.welcome-background{ 
 
\t max-width: 100%; 
 
\t display: block; 
 
\t height: auto; 
 
} 
 

 
.welcome-content-wrap{ 
 
\t position: absolute; 
 
\t top:10%; 
 
\t left: 0; 
 
\t right: 0; 
 
\t bottom: 10%; 
 
\t margin: 0 auto; 
 
\t max-width: 800px; 
 
\t background: rgb(0, 0, 0); 
 
\t background: rgba(0, 0, 0, 0.7); 
 
\t text-align: center; 
 
} 
 

 
.welcome-content-wrap img{ 
 
\t display: block; 
 
\t width: 50%; 
 
\t margin: 50px auto; 
 
} 
 

 
.welcome-content-wrap p{ 
 
\t color: #fff; 
 
\t margin: 25px; 
 
} 
 

 
.text-style{ 
 
\t font-family: outstanding; 
 
\t font-size: 0.75em; 
 
}

<div class="welcome-section"> 
 
\t <img class="welcome-background" src="images/menuBackground.jpg"> 
 
\t <div class="welcome-content-wrap"> 
 
\t \t <img src="images/welcomeTransparent.png"> 
 
\t 
 
\t \t <p> 
 
\t \t \t <span class="text-style">WELCOME</span> to Popsie's of Bramhope a modern, local<br> 
 
\t \t \t Yorkshire fish and chip shop. At Popsie's all our food is hand<br> prepared by Popsie's Dad in the shop's kitchen every day. 
 
\t \t </p> 
 
\t \t <p>All our fish is sourced from sustainable sources.</p> 
 
\t \t <p> 
 
\t \t \t We cook fish to order so that it isn't left to dry out under lights,<br> 
 
\t \t \t like in too many chip shops. 
 
\t \t </p> 
 
\t \t <p>Our potatoes are from local Yorkshire & Lincolnshire farms and<br> we pride ourselves on using the best and freshest ingredients.</p> 
 
\t 
 
\t \t <img id="image-m" src="images/shutterstock_164403170.jpg"> 
 
\t \t <img id="image-l" src="images/National-federation-of-fish-logo.png"> 
 
\t \t <img id="image-r" src="images/CSSMSClogo.png"> 
 
\t </div> 
 
</div>

Answer 1

嘗試在支架卸下max-width: 800px從您的css文件的.welcome-content-wrap類。

Answer 2

寬度：100％;

但是你也有一個最大寬度，你可能想要檢查，如果這是阻止它。

Answer 3

我不完全知道你打算與absolute定位做的，但我認爲你沒有不意味着horizontally - 因爲這是已經覆蓋 - 但vertically來代替。

如果我是對的，這可能是你在找什麼？ https://jsfiddle.net/tpfqk0v7/

我改變的是top:10%和bottom: 10%，而是切換到margins

旁註：我剛添加的背景，使其更容易看到的實際變化。隨着一切都是透明的，沒有看到背景圖像，這是有點困難;）

如果你真的意味着x軸/水平包裝，那當然只是忽略我的答案。