Menu
I'm trying to make a php gallery and thats why I need a good Mask, where the pictures later can be shown. I want the Mask not to be bigger than screen-size. I mean, there must be no scrolling and the whole <body> needs to have just the width and height of the browser windows, so that every child object in <body> is limited to the frame-size of the browser and will be shrunk down if it overflows. I've tried with max-width and max-height on the <body>, but it doesn't work.
Here are the contents of my index.html file:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="mother"> <div id="header"> <div id="back-link"> <a href="../">Home</a> </div> <div id="prev"> <a href="">next picture</a> </div> <div id="next"> <a href="">previous picture</a> </div> <div id="headline"> <p class="h2">Our Galery</p> </div> </div> <!-- Content --> <div id="container-bild"> <img src="./bilder/P1130079.JPG" id="img-bild" /> </div> </div> </body> </html> Here are the contents of my style.css file:
body { max-width: 100%; max-height: 100%; } /* mother-container */ div#mother { max-width: 100%; max-height: 100%; margin: auto; } /* main-container */ #container-bild { max-width: 100%; max-height: 100%; } /* picture in main-container */ #img-bild { max-width: 100%; max-height: 100%; border: 1px solid #280198; } Here is a screenshot of what it looks like:
762
In your CSS use: #your-object: height: 100vh; For browser that don't support vh-units , use modernizr.
Make the div a "cover", and make the image position: absolute . Then position it. Also, if you're making a gallery, then make the image's max-height: 90% or something like that. You can set the image height of height: 90vh , so it still has a 10% view height marginal room for spacing.
The min-height property in CSS is used to set the minimum height of a specified element. The min-height property always overrides both height and max-height . Authors may use any of the length values as long as they are a positive value.
To set the height and width to be 100% of the window (viewport) size, use:
height: 100vh;//100% view height width: 100vw;// 100% view width .
div { background-color: blue; height: 100vh; width: 100vw; position: absolute; top: 0; left: 0; color: white; }<div>some content here</div> Try:
html, body { height: 100%; } body { overflow: hidden; } Do you know how many child elements will be in your gallery? If the number of elements is static, you could simply set their dimensions in CSS using vw and vh units. No JavaScript involved, and the elements would never be able to overflow your body.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
