HACKER Q&A
📣 cphoover

Why do certain websites' images get smaller when I zoom in?


It seems as though very frequently these days whenever I try to enlarge an image by zooming in within chrome (ctrl-+) images end up getting smaller. What is with this current anti-pattern? I see it all over the place including Whatsapp, google images, facebook's gallery view.

When I zoom in within my browser I would assume images would get bigger not smaller.

I believe this to be an issue within dynamic flex-based layouts and/or percentage based width on an image.

  👤 joostdecock Accepted Answer ✓
Changing the Zoom in the browser doesn't actually zoom in (as in, the entire page is still in the viewport). Instead it increases the font size, which will have a knock-on effect on everything that is based on font size (like em, rem, or ch units in CSS).

Many images are responsive and will take up whatever (typically horizontal) space is available. So by making the text larger, there's less space left for the images and they become smaller.

I don't think that makes it an anti-pattern. It's more of a quirk of how zooming is implemented in browsers.(or perhaps the feature's name is misleading).

👤 cma
Why do many mobile versions of sites disable zoom? What's the use case they are solving?
👤 samstave
There is an option in FF and I think chrome "zoom text only"

https://imgur.com/a/DuIroyH

Uncheck that in FF find it in chrome...

EDIT: Cant find same in chrome settings - but I no longer use chrome... but this setting in FF, if checked, is annoying AF.

👤 mdrzn
I frequently have the same issue, and I wish there was a way to "highjack" the CTRL + zoom to make it behave like a pinch and zoom on a Mac trackpad. I literally just want to "zoom in" the webpage, not scale up text.

Does anybody knows if there's an extension or something for that?

👤 bashy
Probably the CSS property background-size [0] with cover value.

[0] https://www.w3schools.com/csSref/tryit.asp?filename=trycss_p...

👤 fouc
This is why I usually use the OS level zoom these days for enlarging an image.
👤 awinter-py
ugh the gmail lightpanel does this

as part of goog's strategy of deeply nested divs ftw in modern gmail

`document.querySelector('div[role="img"] img')` to look at it

from what I can see, the width & height in the parent div's style are changing manually every time I zoom, i.e. JS event. This is probably why it takes a second to update; css would be synchronous with the rest of the UX zooming, unless there's an animation

yuck. also impossible to right click, so no easy way to view the image in another tab

👤 drcongo
I can't check Facebook or WhatsApp because Facebook, but in Safari on a Mac this doesn't happen on Google Images.