
previous

page 2
next
styles.css
#game {
width:120vmin;
height:90vmin;
}
width:120vmin;
height:90vmin;
}
Did you try it and find that it made no difference? Sadly the browser isn't smart enough to realise why our image is in the game container.
Fortunately there's an easy solution. We simply "tell" the browser that the image is to use 100% of the container it finds itself in. Like this:
#game {
width:120vmin;
height:90vmin;
}
#scene {
height:100%;
}
width:120vmin;
height:90vmin;
}
#scene {
height:100%;
}
Notice that it's only successful for landscape mode which my game assumes.
Now we come to the really ineresting part - putting an item into the scene. Not so long ago, this was awesomely messy but now we have CSS Grid which makes it so simple. Please be aware that only the latest browsers support this facility.
On the next page I'll show you how to designate the game container as a grid with 10 rows and 10 columns.
previous
next