CSS: set image height; aspect ratio; Gall-Peters projection

Question

I have a Gall-Peters projection on my website. I want to give the image 100% of available width while keeping the height correct so that countries do not get elongated. What is the right CSS to keep the aspect ratio?

score 2 · Accepted Answer · answered Mar 03 '13 at 23:22

2

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

answered Mar 03 '13 at 23:22

Michael Theriot

994
7
13

score 0 · Answer 2 · answered Mar 03 '13 at 23:20

0

Simply width: 100%. The height of an image should automatically be set to keep the original aspect ratio.

answered Mar 03 '13 at 23:20

James Coyle

9,922
1
40
48

CSS: set image height; aspect ratio; Gall-Peters projection

2 Answers2