CODEWITHSUNDEEP
htmlcssflexbox
Pirozek
Pirozek

Reputation: 1270

Resize images proportionaly in flex grid

I am trying to create 3 column layout, where width of middle column is defined by percentage and left and right columns contains image which I need to scale proportionaly when I change width of middle column.

HTML

<div class="wrapper">
  <img src="http://www.tinaandersonoc.com/wp-content/uploads/2013/01/brick_wallS.jpg" alt="" />

  <div class="dynamic"></div>

  <img src="http://www.tinaandersonoc.com/wp-content/uploads/2013/01/brick_wallS.jpg" alt="" />
</div>

CSS

div.wrapper {
  margin: 20px 0;
  display: box;
  display: -webkit-flex;
  display: flex;
  width: 600px;
}

div.wrapper img {
  max-width: 100%;
  width: auto;
  height: auto;
  box-flex: 1;
}

div.dynamic {
  background-color: red;
  height: 20px;
  width: 80%;
}

I created this codepen for better understanding of problem - http://codepen.io/anon/pen/yOJrxJ

What do I need to add to my CSS to have those two images scaled in proportions (it should be square image, not this "noodle").

Upvotes: 1

Views: 701

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105903

if you want to keep ratio, image should not be flex-child , wrap them in any tag

div.wrapper {
  margin: 20px 0;
  display: box;
  display: -webkit-flex;
  display: flex;
  width: 80%;
  margin:auto;
}
div.wrapper b {/* b or span or div or whatever (b is short to write ) */
  flex: 1;
}
div.wrapper b img {
  width: 100%;
  display: block;
}
div.dynamic {
  background-color: red;
  width: 80%;
}
<div class="wrapper">
  <b><img src="http://www.tinaandersonoc.com/wp-content/uploads/2013/01/brick_wallS.jpg" alt="" /></b>

  <div class="dynamic">image should not be flex-child , wrap them in any tag</div>

  <b><img src="http://www.tinaandersonoc.com/wp-content/uploads/2013/01/brick_wallS.jpg" alt="" /></b>
</div>

Upvotes: 1

Related Questions