css - 相对于在 firefox 和 chrome 上工作不同的父级的大小

Question

我正在使用 Bootstrap 中的 .h-75 来调整图像相对于其父 div 的大小。在 Firefox 上调整大小有效，但在 Chrome 上它似乎忽略了它。

我尝试添加 object-fit:cover 但没有成功。

  <div class="container d-flex flex-column min-vh-100">
    <div>
      Some objects
    </div>
    <div class="mb-3" style="max-height: 50vh;">
      <img src="./img/mmm.png" class="d-none d-sm-inline h-75">
      <p class="mt-1 lead">some text</p>
    </div>
    <div>
      Some objects
    </div>
  </div>

我希望 chrome 在我像 firefox 一样缩小视口(viewport)时动态调整图像大小。

Answer 1

    Solution: ->
    Insted of using h-75 class, you can try img-fluid class to <img> tag...it adjust automatically according to viewport.

    <div class="container d-flex flex-column min-vh-100">
        <div>
          Some objects
        </div>
        <div class="mb-3" style="max-height: 50vh;">
          <img src="./img/mmm.png" class="d-none d-sm-inline img-fluid">
          <p class="mt-1 lead">some text</p>
        </div>
        <div>
          Some objects
        </div>
      </div>

You can try this...