Jon49
Jon49

Reputation: 4606

Flexbox Shrink Images within Div for Column Stacked images

I would like to have one image on the left and two on the right stacked on top of one another. As the footprint shrinks, horizontally, I would like the images to become small too, maintaining their aspect ratios. When I currently do it the images maintain their same size and are pushed off the left side of the page.

I am using bootstrap 3.* right now. But I would be curious to know how to do it with flexbox.

codepen

* {
  box-sizing: border-box;
}

.content {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px;
}

.row {
  display: flex;
  flex-flow: column wrap-reverse;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  height: 40px;
  background-color: rgba(0, 0, 0, .2);
}

.cell {
  text-align: center;
  display: flex;
  align-items: center;
  min-height: 50%;
  padding-top: 5px;
  padding-bottom: 5px;
}

.ordered3 {
  order: 3;
  flex: 2;
  padding-right: 10px;
  border-right: rgba(0, 0, 0, 0.3) solid 3px;
}

.ordered2 {
  order: 2;
  flex: 1;
}

.ordered1 {
  order: 1;
  flex: 1;
}

img {
  margin: auto;
  width: 100%;
  max-width: 300px;
  max-height: 100%
}
<div class="content">
  <div class="row">
    <div class="cell ordered3">
      <img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg" />
    </div>
    <div class="cell ordered2">
      <img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg" />
    </div>
    <div class="cell ordered1">
      <img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg" />
    </div>
  </div>
</div>

Upvotes: 2

Views: 64

Answers (1)

David Yunevich
David Yunevich

Reputation: 194

Check my codeopen. If it's not what you want, please clarify your issue.

    * {
      box-sizing: border-box;
    }

    .content {
      background-color: #f9f9f9;
      border: 1px solid #ececec;
      padding: 10px;
    }

    .row {
      display: flex;
      align-items: center;
    }

    .cell {
      padding-top: 5px;
      padding-bottom: 5px;
    }

   

    img {
      width: 100%;
      display: block;
      max-width: 300px;
    }
<div class="content">
  <div class="row">
      <div class="cell">
          <img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg"/>
      </div>
      <div class="cell">
          <img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg"/>
        <img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg"/>
      </div>
    <div class="cell">
          <img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg"/>
      </div>
     <div class="cell">
          <img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg"/>
        <img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg"/>
      </div>
    </div>
</div>

Upvotes: 1

Related Questions