How to keep the aspect ratio side by side, keep the images the same height And have a fixed pad between the images?

Question

I am currently using the accepted answer table template from this question: Scale different width images to fit the line and maintain equal height to place two images side by side, keep their proportions and keep them the same height when scaling. I would also like for each image to have a rest filling of 8 pixels. I would like the pad to remain 8px regardless of the width of the ul / table.

Here is jsfiddle Im working on: https://jsfiddle.net/maryjames0/u1o5Lkmf/

Here's the HTML:

<ul>
<li><img src="http://walops.com/wp-content/uploads/Puppy-Awesome-Wallpaper-100x100.jpg" /></li>
<li><img src="http://photos.the-scientist.com/legacyArticleImages/2011/08/panda-200x100.jpg" /></li>
</ul>

And CSS:

body {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: table;
  border-collapse: collapse;
  width: 100%;
}
li {
  display: table-cell;
}
img {
  display: block;
  width: 100%;
  height: auto;
}

So far, Ive tried the following without success:

• 8px
• 8px
• 8px
• 8px
• 8
• , "" , 8

CSS, javascript/jQuery, .

!

Answer 1

, ( , ), auto ( ). . - float display:inline-block, . https://jsfiddle.net/u1o5Lkmf/5/

, JavaScript, .

Answer 2

, . , , , , .

. jsfiddle: https://jsfiddle.net/kfsfu9bx/

:

li {
  overflow: hidden;
}

img {
  float: right;
  margin-top: -4px;
  width: calc(100% - 8px);
}