如何在保持宽高比的情况下使图像扩展/缩小到可用空间

Question

我们如何使图像在下面的第二列中“适合”？这是Bootstrap 4，我希望右列与左列具有相同的高度，然后图像在保持纵横比的同时适合其中。我还希望它在水平和垂直方向居中。

​

​

HTML目前看起来如下所示：

<div class="form-row">
    <div class="col">
        <div class="form-group">
            <!-- Upload Image option -->
        </div>
        <div class="form-group">
            <!-- Image URL option -->
        </div>
    </div>

    <div class="col-md-4">
        <img src="leg.jpg" height="70px" />
    </div>
</div>

我只是不想指定height="70px"属性。图像应扩展/缩小以覆盖可用高度(由左列指定)。图像的宽度应该调整，以保持纵横比不变。图像最终应该水平居中或垂直居中。

Answer 1

根据屏幕截图的外观，有来自其他类的CSS，以及比所提供的更多的HTML布局。以下是与包含<figure>的img相关的以下样式。

​

.form-row {
  max-width: 540px;
}

img {
  object-fit: contain;
  max-width: 100%;
  height: auto
}

.column {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<main class='container'>
  <section class="form-row">

    <section class="column col-8">
      <div class="form-group">

        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <div class="input-group-text">
              <input type="radio">
            </div>
          </div>
          <div class="custom-file">
            <input type="file" class="custom-file-input form-control">
            <label class="custom-file-label">Choose file</label>
          </div>
        </div>
      </div>

      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <input type="radio">
          </div>
        </div>
        <input type="url" class="custom-url-input form-control">

      </div>
    </section>

    <section class="column col-4">
      <figure class='figure'>
        <img src="https://oehawkseye.org/wp-content/uploads/2017/01/chicken-leg.png" class='figure-img img-fluid'>
      </figure>
    </section>

  </section>
</main>

​