I am trying to set the height of a li element to be responsive based on the viewport, with a width of 20%. However, I want the height to increase on smaller screens. Inside the li element, there is a responsive image, but when I decrease the height, the image does not shrink accordingly. Is there a way to resize the width and height of the li element together? You can view the code on CodePen: http://codepen.io/anon/pen/QbbOrb
*, *: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;
}
HTML
<ul>
<li><div><img src="http://lorempixel.com/1450/600/"></div></li>
</ul>