title: Is it possible to use responsive image technic technique for height and width together?
body: <p>I have a li element with width:20%; the height is depends from the viewport. On small screen I would like bigger height. Inside I have an image what is responsive. The problem is that when I reduce the height of the li element the image doesn't shrink. I would like to resize the width and height together. CodePen: <a href="http://codepen.io/anon/pen/QbbOrb" rel="nofollow">http://codepen.io/anon/pen/QbbOrb</a></p>
  
  <pre><code> *, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  ul {
    list-style:none;
    margin:0;
    padding:0;
  }
  
  li {
    width:20%;
    height:100px;
    display: inline-block;
    background: lightblue;
    padding: 15px;
  }
  
  img {
    max-width:100%;
    height:auto;
    display:block;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;div&gt;&lt;img src="http://lorempixel.com/1450/600/"&gt;&lt;/div&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>