Going by google design, I need my media section of a card(which is the image showing my website) to be 16:9 ratio. I'm using CSS to do this. How can I tell if media part(the image portion) this is correctly 16:9 ratio?

Note: The image itself needs to be 16:9, not the whole card. Also, I use Linux and do not own any Adobe products.

The image portion needs to be 16:9 ratio


You need to ensure that the image width relates to the height as the number 16 relates to the number 9.

16 divided by 9 is 1.77777778. That means that your image width must be 1.77777778 times larger than the height.

E.g. an image with the width of 800px should be 450px high.

  • Not true. You can't use pixels for this ratio because mobile devices can be rotated from a 16:9 to a 9:16 (or similar). For SVG and CSS, this is easy to fix because you can use a multiple of 16mm by 9mm. – technosaurus Dec 21 '15 at 12:13
  • I don't think your case is applicable to the question. If you rotate a device, the image ratio stays the same. This is intended. – sy'aY_A--0S5'iTH Dec 21 '15 at 12:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.