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

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
}

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