Set image width to half page width

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.