将图像宽度设置为页面宽度的一半

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

假设所有图像的视口宽度都不超过视口的一半，则可以在图像的父级（而不是width －子级{{1}）上设置50vw的{​​{1}} }元素）。

.gallery

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
}

这应该可以解决您的问题。