html - 如何强制图像以纵向显示？

Question

我有一个网页，其中包含 bootstrap 卡中的图像，但其中一些是横向的，一些是纵向的，所以我如何强制所有图像以纵向显示，最好只使用 css 或 bootstrap 4 或 html5。

这是我的代码:

<div class="card mb-4"style="min-width: 18rem; max-width: 18rem;"> 
<img src="images/1.jpeg" alt="image" class="card-img-top img-responsive">
</div>

Answer 1

这将需要使用 div 元素进行某种形式的裁剪。不看网站就很难准确说出你想要什么，但这里有一个潜在的解决方案，使用 height:0; 和百分比 padding-bottom 创建一个 div具有固定的宽高比，然后使用背景图像而不是图像。

如果您仍想使用图像，则需要使用 Javascript 或新的 object-fit CSS 属性，但 object-fit 不受支持浏览器。

.portrait {
  height:0;
  padding-bottom:150%;
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="card mb-4"style="min-width: 18rem; max-width: 18rem;">
  <div class="portrait" style="background-image:url(https://via.placeholder.com/200x300);"></div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card mb-4"style="min-width: 18rem; max-width: 18rem;">
  <div class="portrait" style="background-image:url(https://via.placeholder.com/300x200);"></div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>