在模态的div中拟合图像

我有一个小问题,我正在尝试将我的形象适合我的模态div。

这就是我现在拥有的,我希望它就像我用红色绘制

What i have, in red is what I really want

原始图像是这个,所以您拥有一个理想尺寸

Real image

我现在的代码就是这样。

情态的

<div class="modal-header">
  <button type="button" class="close" onclick="hideModal()">&times;</button>
</div>

<!-- Modal Body -->
<div class="modal-body">
  <img class="modal-img" src="/images" >
</div>

** img **

<img style='height: 100%; width: 100%; object-fit: contain' onclick="showModal(this)" src="{$product.image}"  alt="" class="img-responsive">