HTML将图像保持在行内而不会溢出答案

【问题标题】：HTML keeping images inside row without overflowing itHTML将图像保持在行内而不会溢出
【发布时间】：2020-06-02 20:54:55
【问题描述】：

<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>

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

我已经尝试过 img-fluid、img-responsive、max-height: 100%，但是图像忽略了所有这些选项，并且不断溢出行 div 和流体容器！

【问题讨论】：

请在问题中输入您的代码。 help center How to Ask
我应该解释得更好。请将代码复制/粘贴到问题中。对于那些想帮助您仅使用代码图像的人来说，这是非常困难的。
想象一下你自己试图帮助并输入你在平均屏幕截图上看到的内容，我自己不这样做;)

标签： html css image containers aurelia

【解决方案1】：

尝试使用 max-width 和 max-height 而不是 height 和 width。

<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>

【讨论】：

正如我在帖子中所说的那样，我已经尝试过了......但无论如何谢谢
如果你不介意的话，你可以试试使用flex。我也在答案中添加了。
这行不通，很遗憾。图片未正确调整大小。
请看看我的笔codepen.io/md-asaduzzaman-muhid/pen/VwLKbdw它正在工作
我使用了模板网格及其工作。不过还是谢谢你！！