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

Question

When trying to make the images on my page equal to 50 percent (half the page) it just sets my images equal to half their original size. What i want is to maintain the image widths (100 percent), and make the flexbox boxes that contain each image, equal to 50 percent (half the page). How do I achieve this while maintaining 100 percent of the images?

  * { 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

Assuming none of your images are wider than half the viewport, you could set a width of 50vw on the images' parent (not the .gallery — the child <div> elements).

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

Answer 2

You just have to set the flex-grow: 2 and the div width: 50%

Use the following CSS code:

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

This should fix your issue.