There are some images inside of a blue container. This container lives in a parent container as the one before him. What is the best approach to make it responsive on all devices? What should I change with media queries? How to make different images inside of a div container element not to stack on one another when resizing the window width? Thank you. I have a figma scratch that could help you analyze the core of the problem: https://www.figma.com/file/4d3VMi7YiyB62SgmLiOJn9/Sample-Design?node-id=0:1&t=dOpflAKWCSL1iCTT-0

A figma demo example

<div >
    <div >
      <div >
        <div >
          <h1>Banking Should Be Easy.</h1>
          <p>financial transactions without interet using a mobile device such as a smartphone or tablet with bluetooth. </p>
          <a href="#">Get started</a>
        </div>
      </div>
      <div >
        <img  src="./img/promo/promo-bottom-left.png" alt=""> 
        <img  src="./img/promo/promo-top-left.png" alt="">
        <img  src="./img/promo/promo-top-right.png" alt="">
        <img  src="./img/promo/promo_center.png" alt="">
        <img  src="./img/promo/hard-bottom-right-mask.png" alt="">
      </div>
    </div>
  </div>




 promo-container {
      width: 100%;
      height: 75rem;
      padding-left: 8rem;
      padding-right: 8rem;
    }
    
    .promo {
      display: flex;
      height: 100%;
    }
    
    .promo-info-container {
      width: 50%;
      height: auto;
      background-color: #F3F4FF;
    }
    
    
    .promo-info {
      padding: 19.3rem 9.5rem;
    }
    
    .promo-info h1 {
      font-weight: 700;
      font-size: 5.5rem;
      line-height: 7rem;
      color: #000;
      margin-bottom: 3rem;
    }
    
    .promo-info p {
      font-weight: 400;
      font-size: 2rem;
      line-height: 3.4rem;
      letter-spacing: 0.015em;
      color: #363D70;
      margin-bottom: 6.5rem;
    }
    
    .promo-info a {
      display: inline-block;
      font-weight: 500;
      line-height: 2rem;
      font-size: 2rem;
      color: #FAFCFF;
      letter-spacing: 0.04em;
      padding: 2.5rem 4.8rem;
      background-color: #3C50E0;
      border-radius: 1.6rem;
    }
    
    
    
    .promo-images {
      position: relative;
      width: 50%;
      height: auto;
      background-color: #3C50E0;
    }
    
    .promo-images > * {
      position: absolute;
      max-width: 100%;
      max-height: 100%;
    }
    
    .promo-top-left {
      top: 69px;
      left: 86px;
    }
    
    .promo-bottom-left {
      left: 38px;
      bottom: 96px;
    }
    
    .promo-top-right {
      right: 0;
      top: 123px;
    }
    
    .promo_center {
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    
    .hard-bottom-right-mask {
      bottom: 96px;
      right: 67px;
      background-color: #0C1229;
      border-radius: 16px;
    }

CodePudding user response：

To nicely place all the images inside of the container and make it responsive, you can use CSS Flexbox or Grid to control the layout of the images within the container.

Here is an example of how you can use CSS Flexbox to control the layout:

.promo-container {
  display: flex;
  flex-wrap: wrap;
}
.promo-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.promo-images img {
  width: 100%;
}

Here is an example of how you can use CSS Grid to control the layout:

.promo-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.promo-images img {
  width: 100%;
}

You can then use CSS media queries to change the layout of the images based on the screen size.

Additionally, you can use the CSS property 'object-fit' for the images to control how the images are scaled within the container.

It's also important to use CSS to ensure the images are fully responsive. This can be done by specifying a percentage value for the width and height of the images.

Finally, you may use CSS classes to give a specific position to the images like in your example,

<img  src="./img/promo/promo-bottom-left.png" alt=""> 
<img  src="./img/promo/promo-top-left.png" alt="">
<img  src="./img/promo/promo-top-right.png" alt="">
<img  src="./img/promo/promo_center.png" alt="">
<img  src="./img/promo/hard-bottom-right-mask.png" alt="">