1 image vs 2 images side by side-CodePudding

Can some please tell me how to add 1 image side-by-side as shown in this image, I mean with complete responsiveness

.container {
  margin: auto;
  width: 78vw;
  height: 50vh;
  background-color: aqua;
  border-radius: 10%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.big-image {
  background: url("https://media.istockphoto.com/photos/nothing-better-than-sliding-into-bed-with-a-good-read-picture-id929998552?b=1&k=20&m=929998552&s=170667a&w=0&h=GkJP5lHXoyVLYDIa86G6stcyEvoaAgN7xBFqgrc3QH8=");
  width: 65%;
  height: auto;
  background-size: contain;
  background-repeat: no-repeat;
}

.twoSmallImages {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 33%;
  height: 100%;
}

.img1 {
  background: url("https://media.istockphoto.com/photos/nothing-better-than-sliding-into-bed-with-a-good-read-picture-id929998552?b=1&k=20&m=929998552&s=170667a&w=0&h=GkJP5lHXoyVLYDIa86G6stcyEvoaAgN7xBFqgrc3QH8=");
  width: 100%;
  height: 45%;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 2px auto;
  background-color: #fff;
}

.img2 {
  background: url("https://media.istockphoto.com/photos/nothing-better-than-sliding-into-bed-with-a-good-read-picture-id929998552?b=1&k=20&m=929998552&s=170667a&w=0&h=GkJP5lHXoyVLYDIa86G6stcyEvoaAgN7xBFqgrc3QH8=");
  width: 100%;
  height: 45%;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 2px auto;
  background-color: brown;
}

<div class="container">
  <div class="big-image"></div>
  <div class="twoSmallImages">
    <div class="img1"></div>
    <div class="img2"></div>
  </div>
</div>

CodePudding user response：

First ask correct question, then use this code and change your customize.. and

.box{
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows:1fr 1fr;
  width: 600px;
  background:red;
  gap:1rem;
  padding: 1rem
}
.img{
  width:100%;
  height:100%
}
.img01{
 grid-column:1/2;
  grid-row:1/3
}
.img02{
 grid-column:2/3;
  grid-row:1/2
}
.img03{
 grid-column:2/3;
  grid-row:2/3
}

<div class="box">
  <img class="img img01" src="https://picsum.photos/id/237/600/400" title="" alt="">
  <img class="img img02" src="https://picsum.photos/id/238/600/400" title="" alt="">
  <img class="img img03" src="https://picsum.photos/id/239/600/400" title="" alt="">
</div>

CodePudding user response：

You can use display flex or grid. In this example I have used flex. If you want to use grid then let me know. The code is responsive so click on full page to see the layout that you have requested.

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.fragment {
  width: 100%;
  display: flex;
}

.fragment:nth-child(2) {
  flex-direction: column;
  gap: .5rem;
}

.image {
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media only screen and (min-width: 1024px) {
  .container {
    flex-direction: row;
  }
  .fragment:nth-child(2) {
    flex-direction: column;
    gap: .5rem;
  }
  .image {
    height: 50%;
  }
}

<div class="container">
  <div class="fragment">
    <img src="https://media.istockphoto.com/photos/nothing-better-than-sliding-into-bed-with-a-good-read-picture-id929998552?b=1&k=20&m=929998552&s=170667a&w=0&h=GkJP5lHXoyVLYDIa86G6stcyEvoaAgN7xBFqgrc3QH8=" alt="image" />
  </div>

  <div class="fragment">
    <div class="image">
      <img src="https://media.istockphoto.com/photos/smart-student-learning-using-internet-and-headphones-picture-id1128717611" alt="image" />
    </div>

    <div class="image">
      <img src="https://media.istockphoto.com/photos/shopping-online-concept-shopping-service-on-the-online-web-with-by-picture-id1133980246" alt="image">
    </div>
  </div>
</div>

CodePudding user response：

This layout looks like a grid.

You can specify the grid template areas so that the big image covers basically two thirds of the width and the smaller images one third.

This snippet sets the size of the background images to cover so that the full grid looks like in the picture given in the question whatever the viewport size. However, this will of course not always show complete images and if it is important to have complete images whatever the various aspect ratios then go back to using contain though you will sometimes get space either top and bottom or at the sides of an image.

Note that the HTML and the CSS have been simplified to make things clearer.

.container {
  margin: auto;
  width: 78vw;
  height: 50vh;
  background-color: aqua;
  border-radius: 10%;
  display: grid;
  grid-template-areas:
    'a a b'
    'a a c';
  grid-gap: 1vw;
}
.container div {
  background-size: cover;
  background-position: center center;
}
.big-image {
  background: url("https://media.istockphoto.com/photos/nothing-better-than-sliding-into-bed-with-a-good-read-picture-id929998552?b=1&k=20&m=929998552&s=170667a&w=0&h=GkJP5lHXoyVLYDIa86G6stcyEvoaAgN7xBFqgrc3QH8=");
  grid-area: a;
}

.img1 {
  background: url("https://media.istockphoto.com/photos/nothing-better-than-sliding-into-bed-with-a-good-read-picture-id929998552?b=1&k=20&m=929998552&s=170667a&w=0&h=GkJP5lHXoyVLYDIa86G6stcyEvoaAgN7xBFqgrc3QH8=");
  background-color: #fff;
  grid-area: b;
}

.img2 {
  background: url("https://media.istockphoto.com/photos/nothing-better-than-sliding-into-bed-with-a-good-read-picture-id929998552?b=1&k=20&m=929998552&s=170667a&w=0&h=GkJP5lHXoyVLYDIa86G6stcyEvoaAgN7xBFqgrc3QH8=");
  background-color: brown;
  grid-area: c;
}

<div class="container">
  <div class="big-image"></div>
    <div class="img1"></div>
    <div class="img2"></div>
</div>