Is there a way to make a screen 100% height and width but when scaled down will always be large enough to contain children elements
Question
Essentially on desktop I want the background to cover everything (eg a landing page) but when the screen is made smaller I dont want content meant to be on that main screen to be spill out. Instead I'd like the background to then extend to encapsulate all children content. Essentially keep the children the same size but make sure the background (container) always stays just big enough to hold all of them.
I know I can use css and specify how things look at different sizes but I'd prefer to do this in a responsive way and not rely on me guessing the size of someone else's device.
Specifically trying to avoid a blanket 100vh since when the screen is shrunk The content can spill out the bottom.
2 answers
solution1
0 2019-08-07 23:20:15
Not completly sure I know what you want, but the following sample could be expanded to a <div> that wraps all the content or even added to the <body> if you like.
The CSS attribute background-size is using cover but this could be changed to a number of other options .
.containbg { padding:1em; background-image:url("https://via.placeholder.com/200/fda"); background-size:cover; background-position:center center; } .containbg img { padding:1em }
<div class="containbg"> <p>Hello div test 1</p> <p>Nice to meet you</p> </div> This is a test gap <div class="containbg"> <img src="https://via.placeholder.com/100/879" /><br /> <p>Hello div test 2</p> <p>Nice to meet you too</p> <p>And how has your day been?</p> <img src="https://via.placeholder.com/100/879" /><br /> </div>
solution2
-1 2019-08-07 22:46:39
尝试将背景图像设置为 100vh
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.