CODEWITHSUNDEEP
htmlcssimageflexboxresponsive-design
Biebk
Biebk

Reputation: 161

How do I maintain constant image height? Stuck in flexbox?

I am trying to create flexbox with different image heights and width. I want the break points as

 max-width: 640px; ------->Only one column
 max-width: 860px; -------->Two columns only
 greater than: 860px;-------->Three column only

What I am messing with? Why it is becoming ugly while shrinking window?I am losing 3 column of image even before window size reach 860px breakpoint. What else can I do? After window size reaches to 860px it is working fine, but until than it is becoming ugly.

I want my image height not be changed. Let it be as it is !

.container {
  width: 100%;
  height: 1000px;
  display: flex;
  flex-direction: column;
  background: green;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  
  
}
.box {
  width: 30%;
  border: 2px solid red;
  margin: 8px;
}
img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 860px) {
  .container {
    background-color: red;
    height: 1100px;
  }
  .box {
    width: 46%;
  }
}
@media screen and (max-width: 640px){
    .container {
        background-color: yellowgreen;
        height: auto;
        flex-direction: row;
    }
    .box {
        width: 100%;
    }
}
<div class="container">
  
<div class="box">
  <img src="https://www.daily-sun.com/assets/news_images/2017/01/12/DAILYSUN_ZYAN.jpg" alt="">
</div>
  <div class="box">
  <img src="https://i.pinimg.com/originals/79/e2/8d/79e28db17abc2eb6c3085c9c72bff5e4.jpg" alt="">
</div>
  <div class="box">
  <img src="https://www.pinkvilla.com/files/styles/gallery-section/public/zayn_malik_tattoos_1.jpg?itok=Q5bXGlfm" alt="">
</div>
  <div class="box">
  <img src="https://i.pinimg.com/originals/b5/0c/30/b50c30ddaaffc98ff2cb077cc7f57823.jpg" alt="">
</div>
  <div class="box">
  <img src="https://images.news18.com/ibnlive/uploads/2021/01/1610783227_zayn-malik.jpg" alt="">
</div>
  <div class="box">
  <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gigi-hadid-and-zayn-malik-attend-the-manus-x-machina-news-photo-527409630-1554477973.jpg?crop=1.00xw:0.762xh;0,0.0194xh&resize=480:*" alt="">
</div>
</div>

Upvotes: 3

Views: 335

Answers (2)

user3733831
user3733831

Reputation: 2926

In this cas, I would use CSS column-count and CSS grid.

Just an example with your code:

.container {
  column-count: 3;
  column-gap: 10px;
  background: green;
  padding: 10px;
}

@media (max-width: 640px) { 
  .container {
    column-count: 1;
  }
}

@media (min-width: 641px) and (max-width: 840px) { 
  .container {
    column-count: 2;
  }
}

img {
  max-width: 100%;
  display: block;
}

.box {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  margin-bottom: 10px;
  break-inside: avoid;
  border: 2px solid red;
}
<div class="container">  
  <div class="box">
    <img src="https://www.daily-sun.com/assets/news_images/2017/01/12/DAILYSUN_ZYAN.jpg" alt="">
  </div>
    <div class="box">
    <img src="https://i.pinimg.com/originals/79/e2/8d/79e28db17abc2eb6c3085c9c72bff5e4.jpg" alt="">
  </div>
    <div class="box">
    <img src="https://www.pinkvilla.com/files/styles/gallery-section/public/zayn_malik_tattoos_1.jpg?itok=Q5bXGlfm" alt="">
  </div>
    <div class="box">
    <img src="https://i.pinimg.com/originals/b5/0c/30/b50c30ddaaffc98ff2cb077cc7f57823.jpg" alt="">
  </div>
    <div class="box">
    <img src="https://images.news18.com/ibnlive/uploads/2021/01/1610783227_zayn-malik.jpg" alt="">
  </div>
    <div class="box">
    <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gigi-hadid-and-zayn-malik-attend-the-manus-x-machina-news-photo-527409630-1554477973.jpg?crop=1.00xw:0.762xh;0,0.0194xh&resize=480:*" alt="">
  </div>
</div>

Upvotes: 2

Ahmad
Ahmad

Reputation: 884

However for this layout using grid is the best way, but I tried to find a way by flex. For "flex-direction: column;" height is important so you should set a height that can't contain more than 2 images. I did it with "height: 70vw;"

.container {
  width: 100%;
  height: 70vw;
  display: flex;
  flex-direction: column;
  background: green;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  
  
}
.box {
  width: 30%;
  border: 2px solid red;
  margin: 8px;
}
img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 860px) {
  .container {
    background-color: red;
    height: 1120px;
  }
  .box {
    width: 46%;
  }
}
@media screen and (max-width: 640px){
    .container {
        background-color: yellowgreen;
        height: auto;
        flex-direction: row;
    }
    .box {
        width: 100%;
    }
}
<div class="container">
  
<div class="box">
  <img src="https://www.daily-sun.com/assets/news_images/2017/01/12/DAILYSUN_ZYAN.jpg" alt="">
</div>
  <div class="box">
  <img src="https://i.pinimg.com/originals/79/e2/8d/79e28db17abc2eb6c3085c9c72bff5e4.jpg" alt="">
</div>
  <div class="box">
  <img src="https://www.pinkvilla.com/files/styles/gallery-section/public/zayn_malik_tattoos_1.jpg?itok=Q5bXGlfm" alt="">
</div>
  <div class="box">
  <img src="https://i.pinimg.com/originals/b5/0c/30/b50c30ddaaffc98ff2cb077cc7f57823.jpg" alt="">
</div>
  <div class="box">
  <img src="https://images.news18.com/ibnlive/uploads/2021/01/1610783227_zayn-malik.jpg" alt="">
</div>
  <div class="box">
  <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gigi-hadid-and-zayn-malik-attend-the-manus-x-machina-news-photo-527409630-1554477973.jpg?crop=1.00xw:0.762xh;0,0.0194xh&resize=480:*" alt="">
</div>
</div>

Upvotes: 0

Related Questions