1 张图片与 2 张图片并排

Question

有人能告诉我如何并排添加 1 张图片，如图所示，我的意思是完全响应

.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>

Answer 1

首先提出正确的问题，然后使用此代码并更改您的自定义.. 和

.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>

Answer 2

您可以使用显示flex 或grid。在这个例子中，我使用了flex。如果您想使用grid，请告诉我。该代码是响应式的，因此请单击整页以查看您请求的布局。

.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>

Answer 3

这个布局看起来像一个网格。

您可以指定网格模板区域，使大图基本占宽度的三分之二，小图占三分之一。

此 sn-p 设置要覆盖的背景图像的大小，以便无论视口大小如何，整个网格看起来都像问题中给出的图片。但是，这当然不会总是显示完整的图像，如果无论各种宽高比都具有完整的图像很重要，那么尽管有时您会在图像的顶部和底部或两侧获得空间，但您可以返回使用 contains。

请注意，HTML 和 CSS 已被简化以使事情更清晰。

.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>