时间戳

首页 > 解决方案 > 如何在保持纵横比的同时使图像扩大/缩小到可用空间

html - 如何在保持纵横比的同时使图像扩大/缩小到可用空间

问题描述

我们如何使图像“适合”下面的第二列？这是 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"属性。图像应扩大/缩小以覆盖可用高度（由左列决定）。然后应调整图像的宽度以保持纵横比不变。图像最终应水平或垂直居中。

标签： htmlcsstwitter-bootstrap

解决方案

从截图来看，有来自其他类的 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>

推荐阅读