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布局比所提供的更多。以下是与img相关的以下样式，并用<figure>包裹。

<figure class='figure'> <img class='figure-img fluid-img'...> </figure>

 img {
   object-fit:contain; 
   max-width:100%; 
   height:auto
 }
 .col {
   display:flex; 
   flex-flow:column nowrap; 
   justify-content: center;
   align-items:center
 }

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

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

1 个答案: