1

I'm using the following code to display 5 images (without the use of background) distributed evenly across a container and with an equal height equivalent to the tallest image (although I wonder if it would be possible to do this with the shortest one). Applying flex: 1; on the image-container gives me the desired effect under firefox, but under chrome the 5 images appear vertically stretched and oversized. The desired effect is to keep every container filled under a given width while minimizing loss of aspect ratio.

Edit: I've loaded this page under both browsers and I do get the effect I wanted although they are rendered differently. Now I need to find what's wrong with my version compared to the one I posted here.

body {
  width: 300px;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  background-color: black;
}
.row1 {
  display: flex;
  width: 100%;
  background-color: blue;
}
.column {
  height: 100%;
  width: 20%;
  display: flex;
  flex-flow: column;
  position: relative;
  background-color: red;
}
.image-container {
  overflow: hidden;
  display: flex;
  flex: 1;
  background-color: yellow;
}
img {
  width: 100%;
  height: auto;
}
.image-label {
  width: 100%;
  height: 35px;
  display: flex;
  background-color: green;
  justify-content: center;
}
.row2 {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  background-color: cyan;
  height: 20px;
}
<div class="container">
  <div class="row1">
    <div class="column">
      <div class="image-container">
        <img src="http://www.koka.ac.jp/admission/wp-content/themes/admission/assets/img/common/floating-btn-internet.gif">
      </div>
      <div class="image-label">img1</div>
    </div>
    <div class="column">
      <div class="image-container">
        <img src="http://www.moglix.com/themes/et_poostyle/img/offer.jpg">
      </div>
      <div class="image-label">img2</div>
    </div>
    <div class="column">
      <div class="image-container">
        <img src="http://i.imgur.com/slhFy4T.png">
      </div>
      <div class="image-label">img3</div>
    </div>
    <div class="column">
      <div class="image-container">
        <img src="http://alma-sys.com/images/SLIDE%20MENU%20IMG/WEB%20D%20-%20Copy.jpg">
      </div>
      <div class="image-label">img4</div>
    </div>
    <div class="column">
      <div class="image-container">
        <img src="http://amerpages.com/app/webroot/img/items/121/16716/pds/19682_s.jpg">
      </div>
      <div class="image-label">img5</div>
    </div>
  </div>
  <div class="row2"></div>
</div>
scriptK
  • 53
  • 1
  • 8
  • 1
    You don't have a height declared on `.row1`. That could be viewed as a missing link in some browsers, cause a break in your intended heights. See here for details: http://stackoverflow.com/q/33636796/3597276 – Michael Benjamin Oct 30 '16 at 13:49
  • This is what I get when I apply height: 100%; to .row1. http://imgur.com/9uFhcvF My main concern is that when browser/screen width lowers, images keep stretching vertically and I want them to stretch only up tothe same height as the tallest one. – scriptK Oct 30 '16 at 13:55
  • Here's what I'm looking at in Chrome and FF. I don't see any difference, or anything wrong. https://jsfiddle.net/qgc2t46o/1/ – Michael Benjamin Oct 30 '16 at 14:09
  • 1
    **Solved:** I had `.column { flex: 1; }` (which I missed on the snippet) and changed `img { height: 100% }`. Now its working as desired on both browsers. Thank you – scriptK Oct 30 '16 at 14:28

0 Answers0