Question

My images have a 16:9 aspect ratio. I would like each image’s width to be 33% of the entire browser window so I can stack 3 images per row:

[ ] [ ] [ ]
[ ] [ ] [ ]
[ ]

When I specify width:33% in CSS, the height does not change to maintain the 16:9 aspect ratio. Apparently, CSS is unlike HTML. In HTML, only one dimension needs to be specified.

Answer 1

Just add height: auto.. Thus:

img {
     width: 33%;
     height: auto;
}

Then the height adjusts itself according to the width.