CODEWITHSUNDEEP
htmlcssangular
Oblivion
Oblivion

Reputation: 635

Set image width to half page width

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>

enter image description here

Upvotes: 1

Views: 7952

Answers (2)

IonV
IonV

Reputation: 432

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.

Upvotes: 2

Ito Pizarro
Ito Pizarro

Reputation: 1607

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

Upvotes: 1

Related Questions