Question 297799 in Html Question posted in
Some basic documentation can be found here.

Html – Can't stop images from going beyond my screen size

I am trying to create a background using three images, as shown in the code below. As usual I used display: flex and flex: 1 to organize them and so that they used all the available space and have the same size.

They do have the same size, but they are going beyond my screen size and I can’t find a solution for that. I tried to use max-width, flex-grow and flex-basis but nothing worked so far. And after inspecting the page in my browser (I’m using chrome) it shows that the parent div as the same size as the screen but the last image goes beyond the parent div length.

I have the folowing code:

<div class="pagina-registar">
  <img src="./images/scooter.jfif" class="painel" />
  <img src="./images/globo.jfif" class="painel" />
  <img src="./images/r2d2.jfif" class="painel" />
</div>

<style>
.pagina-registar {
  display: flex;
  width: 100vw;
  height: 100vh;
}

.painel {
  flex: 1;
}
</style>
Tags:

2

Answers


  1. 0

    Try specifying a max-width on the images themselves, that way they can’t extend past their allowed space.

    .pagina-registar {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.painel {
  flex: 1;
  max-width: 33.33%;
  height: auto;
  object-fit: cover;
}
    Login or Signup to reply.
  2. 0

    Change flex: 1; to flex: auto;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search