代码之家 › 专栏 › 技术社区 › dotNET

如何在保持纵横比的同时使图像扩展/收缩到可用空间

twitter-bootstrap css html

dotNET · 技术社区 · 6 年前

我们如何使图像“适合”在下面的第二列中?这是引导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" 属性。图像应展开/收缩以覆盖可用高度(由左栏指定)。然后调整图像的宽度以保持纵横比不变。图像最终应水平或垂直居中。

1 回复 | 直到 6 年前

zer00ne 6 年前

从屏幕截图的外观来看,有来自其他类的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>