使表格单元格与所包含图像的大小相同，且不大

Question

在下面的代码中，我遇到的问题是我需要控制三个图像之间的间距，每个图像都存储在div样式display: table-cell中。如您所见，当屏幕较宽时，div的宽度大于其中包含的图像的宽度;从而使间距不一致。

＆＃13;

＆＃13;

.slider-container {
  left: 75px;
  right: 75px;
  position: fixed;
  top: 75px;
  height: calc(100vh - 150px);
}

.slider-container .table {
  display: table;
  height: inherit;
  width: 100%
}

.slider-container .table .row {
  display: table-row;
  height: inherit;
  vertical-align: middle;
  text-align: center;
}

.slider-container .table .row .cell {
  display: table-cell;
  height: inherit;
  vertical-align: middle;
  font-size: 0;
  padding-right: 15px;
  padding-left: 15px;
}

.slider-container .table .row .cell img {
  max-height: 100%;
  max-width: 100%;
}

.left-cell {
  text-align: right;

}

.middle-cell {
  text-align: center;

}

.right-cell {
  text-align: left;

}

＆＃13;

<div class="slider-container">
  <div class="table">
    <div class="row">
      <div class="cell left-cell"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
      <div class="cell middle-cell"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
      <div class="cell right-cell"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

jsfiddle here

我希望有一个直截了当的解决方案，但对我来说仍然难以捉摸 - 任何帮助都会非常感激。

谢谢，