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一样动态调整图像的大小。

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

Answer 2

Solution: ->        
If you adding max-height on parent div 50vh... So you have to add height same as max-height..

        Here is the code...

        <div class="container d-flex flex-column min-vh-100">
            <div>
              Some objects
            </div>
            <div class="mb-3" style="max-height: 50vh; height: 50vh">
              <img src="https://yt3.ggpht.com/a/AGF-l7-BBIcC888A2qYc3rB44rST01IEYDG3uzbU_A=s900-mo-c-c0xffffffff-rj-k-no" class="d-none d-sm-inline h-75 img-responsive">
              <p class="mt-1 lead">some text</p>
            </div>
            <div>
              Some objects
            </div>
          </div>

    I tried on both browsers Firefox and chrome...

Answer 3

最后，通过从mex-heigh vh切换到vh，我得到了预期的行为。

相对于父级在Firefox和Chrome上进行不同工作的大小

3 个答案: