將圖像寬度設置為頁面寬度的一半

Question

當試圖使頁面上的圖像等於50％（頁面的一半）時，它會將圖像設置為原始尺寸的一半。 我想要的是保持圖像寬度（100％），並使包含每個圖像的flexbox框等於50％（半頁）。 如何在保持100％的圖像的同時實現這一目標？

  * { margin: 0; padding: 0; border: 0; } .gallery { background-color: blue; display: flex; flex-direction: row; flex-wrap: wrap; } .gallery img { width: 100%; height: 100px; } 

  <div class="gallery"> <div *ngFor="let image of images; let i = index;"> <img src={{image.src}} [style.width.%]="50" alt=""> </div> </div> 

Answer 1

假設沒有一個圖像的寬度大於視口的一半，則可以在圖像的父對象（而不是.gallery子元素<div> ）上設置50vw的width 。

.gallery > div {
  flex-basis: 50vw;
  flex-shrink: 0;
  flex-grow: 0;
}

Answer 2

您只需要設置flex-grow：2和div寬度：50％

使用以下CSS代碼：

.gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}
.gallery > div {
    flex-grow: 2;
    width: 50%;
    max-width: 50%;
}
.gallery img {
    width: 100%;
    height: auto; // use this to display responsive image
}

這應該可以解決您的問題。