I want to split the browser window in 4 areas of the same size and center images in it.
It works good in Chrome, but Firefox is using the full width, so a scrollbar appears and the areas do not fit on the screen.
What can I do to make it work in Firefox?
This is my code:
<!doctype html>
<html>
<style>
body {
display: grid;
height: 100vh;
margin: 0;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
div {
display: grid;
margin: 10px;
border: 10px solid red;
}
img {
object-fit: contain;
height: 100%;
width: 100%;
}
</style>
<body>
<div>
<img src="https://www.amaten.it/wp-content/uploads/2017/11/baum-amaten-herbst.jpg">
</div>
<div>
<img src="https://www.amaten.it/wp-content/uploads/2017/11/baum-amaten-herbst.jpg">
</div>
<div>
<img src="https://www.amaten.it/wp-content/uploads/2017/11/baum-amaten-herbst.jpg">
</div>
<div>
<img src="https://www.amaten.it/wp-content/uploads/2017/11/baum-amaten-herbst.jpg">
</div>
</body>
</html>Chrome:
Firefox:
