CODEWITHSUNDEEP
htmlcssimage
Mohammad Kiyan
Mohammad Kiyan

Reputation: 131

Problem in creating side-by-side images (Pure HTML/CSS)

side-by-side image

I have problem in vertical space between Up and down portfolio row. I have some unwanted space in rows It's not margin or padding in box, i think this problem is for img tag Can anyone help me?

.portfolio.row {
display: flex;
}
.col-4 {
  flex: 33.33%;
}
.portfolio > div img {
  width: 100%;
}
<div class="portfolio row">
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
  </div>
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
  </div>
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
  </div>
</div>
<div class="portfolio row">
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
  </div>
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
  </div>
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
  </div>
</div>

Upvotes: 0

Views: 43

Answers (2)

Mobarak Ali
Mobarak Ali

Reputation: 760

Just use the following code and it will be fixed! height: 100%; will solve your problem. here is example

.portfolio>div img {
  width: 100%;
  height: 100%;  /* Add this extar value */
}

Upvotes: -1

SuperDJ
SuperDJ

Reputation: 7661

My guess is that it's trying to keep the aspect ratio of the images. If you add height: 100% it does work:

.portfolio.row {
display: flex;
}
.col-4 {
  flex: 33.33%;
}
.portfolio > div img {
  width: 100%;
  height: 100%;
}
<div class="portfolio row">
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
  </div>
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
  </div>
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
  </div>
</div>
<div class="portfolio row">
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
  </div>
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
  </div>
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
  </div>
</div>

Upvotes: 3

Related Questions