什么公式使元素适合div

Question

我试图找出如何使元素适合（如对象适合）到另一个div中。

该特定元素是一个图像容器（div.ratio-box），它具有固有的宽高比css（填充底部黑客以避免页面跳转）。

问题是，对于纵向图像，图像容器（div.ratio-box）溢出了父（div.slide-cell）。所以我想要做的是根据以下已知值计算（div.slide-cell.portrait）的新宽度基数：

• Img Height，
• Img Width，
• 父级宽度
• 来自浏览器窗口的父级边距

https://jsfiddle.net/5d6zrueh/3/

<div id="slider">
 <div class="flickity-viewport">
  <div class="flickity-slider">
   <div class="slide-cell portrait is-selected">
    <div class="ratio-box centered" style="padding-bottom:150.06002401%;">
     <img src="http://via.placeholder.com/166x250">
    </div>
   </div>
 </div>
</div>

希望你有意义。