Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="outer">
    <div class="inner">
        <img src="http://placekitten.com/g/200/300" />
    </div>
    <div class="inner">
        <img src="http://placekitten.com/g/200/200" />
    </div>
</div>
  </body>

</html>

// Code goes here

/* Styles go here */

html,
body {
  height: 100%;
  width: 100%;
}
.outer {
  height: 30%;
  width:100%;
  border: 1px solid #000;
}
.inner {
  position: relative;
  display: inline-block;
  height: 100%;
  width:auto;
  border: 1px solid #f00;
  
}
img {
  position: relative;
  display: inline;
  height: 100%;
  width: auto;
}