Kevin Powell - Community•13mo ago

Why my images get smaller when i zoom ad viceversa?

.row {
  display:flex;
  gap:1em;
  max-width: 100%;
}

.imageContainer img {
  border-radius: 5px;
  height: 100%;
  width: 100%;
}

.row {
  display:flex;
  gap:1em;
  max-width: 100%;
}

.imageContainer img {
  border-radius: 5px;
  height: 100%;
  width: 100%;
}

i just started using css and i'm confused on this

7 Replies

Kevin Powell•13mo ago

Do you have anything else in the layout? Like, if it's just images and the container is 100% of the viewport, I don't see why anything would change (other than the gap making very small changes) If there is more going on, that could explain it though, because as you zoom in, the available space is getting smaller as other parts of the layout increase in size, reducing how much space the images have, so they shrink down

Kevin Powell•13mo ago

Like here in this video, when I zoom in, the sidebar gets bigger as I zoom in, and then the main content area gets a bit narrower, and the images have to also get smaller, and the opposite when i zoom out

DesertFalcon•13mo ago

this is my page

message.txt

Kevin Powell•13mo ago

Could you save that in a codepen and share the link?

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

DesertFalcon•13mo ago

sure https://codepen.io/marzio-giaquinta-the-selector/pen/oNJEQJa

Kevin Powell•13mo ago

So, when you are zooming in, the gap is getting bigger. Because the width is set as a percentage, the body doesn't change in width when you zoom in, so that 52% stays the same, since it's based on the width of the browser and nothing else. If you remove the width, but did something like max-width: 65rem, and you zoom in, the entire layout will get bigger, and the nthe images have more room, so they get bigger too. That's because as you zoom in, the 65rem becomes bigger and bigger, so everything is getting more space to grow into

DesertFalcon•13mo ago

Oh yeah make sense, thank you so much

Gaming

Programming

Why my images get smaller when i zoom ad viceversa?