html - Responsive Web Design 3 equal height columns -

For responsive design I am trying 3 different height columns, but one of these columns is an image that resizes. I'm able to column 3 alt height text, but adding an image spoils things. I need columns to change the image's height because its size changes when the user decreases his browser.

For example, a 20% text column with a blue background. One image resizing 20% ​​text column 60% column with red background.

Here's a way to get started on flexible layout.

Your HTML may look like this:

  & lt; Div class = "wrapper" & gt; & Lt; Div class = "bookend left" & gt; & Lt; Div class = "content" & gt; You can enter text here ... & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "book value" & gt; & Lt; Div class = "content" & gt; Or here you need. & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "image-panel" & gt; & Lt; Img src = "http://www.placekitten.com/400/300" & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 and CSS:  
 . Warper {width: 100%; Border: 1px dotted blue; Display: Table; }. Bookend {display: table-cell; Vertical-alignment: top; Width: Auto; Minimum-width: 100px; }. Bookend .content {display: inline-block; Width: 100px; Background color: pink; Align text: left; } .image-panel {display: table-cell; Vertical-alignment: top; Background color: green; } .image-panel img {width: 100%; Vertical-alignment: top; } Div.bookend.left {background-color: blue; } Div.bookend.right {background color: red; }   
 To see how it works, go to the demo fiddle:  
  How it works   
 I have a parent block  div.wrapper  with three child elements, in which there is a landscape image that spreads along the window's size.  
 I use CSS to attribute properties of table and table-cell to get three identical height columns.  
 If you are adding content to left and right elements, then it helps to keep that content in a fixed width child container (pink box). This is important if you want red and blue panels to be the same width.