如何在下面的第二栏中使图像“合适”?这是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"
属性。图像应扩大/缩小以覆盖可用高度(由左列指示)。然后应调整图像的宽度以保持纵横比完整。最后,图像应水平或垂直居中。
答案 0 :(得分:0)
通过截图的外观,可以看到其他类的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>