Want flexbox images to increase size according to screen and stick to each other-CodePudding

So i have a container with three images, these images show up in a row, i want the images to stick to each other with only 5% gap in between them on all screen sizes( bigger screens ).And also the first and third image should stick to the browser wall. I tried this css but it doesnt work, the images gets too much gap in between and also the size of the images dont change according to screen size.

Like this:

.three-main {
  height: 100%;
  background-color: #000;
  width: 100%;
  padding-bottom: 100px;
}

.three-child {
  display: flex;
  gap: 30px;
  justify-content: space-between;
  align-items: center;
}

.three-two {
  flex: 0 0 45%;
  height: 600px;
}

.three-two img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.three-one img,
.three-two img,
.three-three img {
  max-width: 100%;
  background-color: #000;
  opacity: 0.51;
}

.three-one img {
  border-radius: 0 20px 20px 0;
}

.three-three img {
  border-radius: 20px 0 0 20px;
}

<div >
  <div >
    <div >
      <img src="https://borah.link/wp-content/uploads/2022/10/SAJ-51-4.png">
    </div>
    <div >
      <img src="https://borah.link/wp-content/uploads/2022/11/SAJ-66-3.png">
    </div>
    <div >
      <img src="https://borah.link/wp-content/uploads/2022/10/SAJ-141-2.jpg">
    </div>
  </div>
</div>

I tried lots of things but nothing worked.

CodePudding user response：

CSS needs to be changed, I changed it to use grid instead of flex and height of first and third image is fixed. You can change it based on device using media query.

.three-main {
  height: 100%;
  background-color: #000;
  width: 100%;
  padding-bottom: 100px;
}

.three-child {
  display: grid;
  grid-template-columns: 1fr 2.5fr 1fr;
  column-gap: 10px;
  align-items:center;
}

.three-two {
  flex: 0 0 45%;
  height: 600px;
}

.three-two img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.three-one img,
.three-two img,
.three-three img {
  width: 100%;
  background-color: #000;
  opacity: 0.51;
}

.three-one img {
  border-radius: 0 20px 20px 0;
}
.three-one img, .three-three img {
  height: 33rem;
}

.three-three img {
  border-radius: 20px 0 0 20px;
}

<div >
  <div >
    <div >
      <img src="https://borah.link/wp-content/uploads/2022/10/SAJ-51-4.png">
    </div>
    <div >
      <img src="https://borah.link/wp-content/uploads/2022/11/SAJ-66-3.png">
    </div>
    <div >
      <img src="https://borah.link/wp-content/uploads/2022/10/SAJ-141-2.jpg">
    </div>
  </div>
</div>