HTML将图像保留在行内而不会溢出

我试图在流体容器div中保存4个图像（必须在一行中），但我的图像总是溢出。目标是使图像适应容器（如object fit:contain）并填充它，而不是忽略其最大高度限制

---

我已经尝试过img流体，img响应，最大高度：100%，但图像忽略了所有这些选项，并不断溢出行div和流体容器

尝试使用最大宽度和最大高度，而不是高度和宽度

<div class="fluid-container">
  <div class="row" style="height: 100%;">
    <div repeat.for="pw of lstPainelWidgets" class="col ${getPanelCol($index)} p-0">
        <img class="my-img" src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1"
        width="100%" height="100%">
    </div>
</div>

通过使用flex，您还可以

<div class="fluid-container">
  <div class="row" style="height: 100%;">
    <div repeat.for="pw of lstPainelWidgets" class="col ${getPanelCol($index)} p-0">
        <img class="my-img" src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" max-width="100%" max-height="100%">
      <img class="my-img " src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" max-width="100%" max-height="100%">
      <img class="my-img" src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" max-width="100%" max-height="100%">
    </div>
</div> 

请在问题中输入您的代码。我应该解释得更清楚些。请将代码复制/粘贴到问题中。对于那些只想帮助您处理代码图像的人来说，这是非常困难的。想象一下，您自己试图帮助并键入您在普通屏幕截图上看到的内容，我自己不这么认为；）正如我在帖子中所说，我已经试过了。。。但无论如何，谢谢你，如果你不介意的话，你可以尝试使用flex。我在回答中也加了这个。不幸的是，这不起作用。图像大小调整不正确。请查看我的笔，它正在工作。我使用的模板网格及其工作状态。不过还是要谢谢你！！

<div cass="container">
    <div class="d-flex ">
      <div class="p-2 flex-fill bd-highlight">
        <img class="my-img img-fluid" src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" max-width="100%" max-height="100%">
       </div>
      <div class="p-2 flex-fill bd-highlight">
        <img class="my-img img-fluid" src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" max-width="100%" max-height="100%">
       </div>
      <div class="p-2 flex-fill bd-highlight">
        <img class="my-img img-fluid" src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" max-width="100%" max-height="100%">
       </div>
      <div class="p-2 flex-fill bd-highlight">
        <img class="my-img img-fluid" src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" max-width="100%" max-height="100%">
       </div>
    </div>
  </div>