How to Zoomin/zoomout content and page both not only page height

Question

I have created a website with applying 100% width using css but when I zoomout my page, it is zooming out only height, not height and width both

Can Anyone know, why it is like that?

Answer 1

If you would have a division that normally has a width of lets say, 400px. That would mean that if you'd zoom out to 50% percent, the div would take up 200px. However, you do not have a fixed height, but use a percentage. So even though most stuff scales (the font-size for example) the division takes up 100% of rhe screen width. The height doesnt change accordingly because the font-size has zoomed out by 50% percent which means that the division has relatively grown to twice its original width. Because the text has shrunk by a factor of two, the height becomes less too.

If you have a glass with a bigger diameter, you dont have to fill it as high as a glass with a smaller diameter to get the same amount of water in. Keep that in mind.