1張影像vs2張并排影像

有人可以告訴我如何并排添加 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>

uj5u.com熱心網友回復：

這種布局看起來像一個網格。

您可以指定網格模板區域，以便大影像基本上覆寫寬度的三分之二，較小影像占三分之一。

此代碼段設定要覆寫的背景影像的大小，以便無論視口大小如何，整個網格看起來都與問題中給出的圖片中的一樣。但是，這當然不會總是顯示完整的影像，如果無論各種縱橫比都有完整的影像很重要，那么請回傳使用包含，盡管有時您會在影像的頂部和底部或兩側獲得空間。

請注意，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>

uj5u.com熱心網友回復：

首先提出正確的問題，然后使用此代碼并更改您的自定義...和

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

uj5u.com熱心網友回復：

您可以使用 displayflex或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>

標籤：html css 图片

上一篇：如何將2張影像放在一個地方Flutter

下一篇：通過react-redux中的input標簽上傳和顯示影像檔案