html - 由于样式 (Bootstrap 4)，卡片中的图像看起来很差

Question

如果您上传的图片高度较高而宽度较小，那么它在卡片(用户卡片)中的显示效果会很差。这是 HTML 和 css 部分。我们正在使用 Angular:

HTML

<div class="container-fluid" >
  <div class="row people-row">
    <div class="col-12 row">
      <div class="m1-* col-md-3 text-center" *ngFor="let user of filteredUsers | filter: searchByKeyword: 'name' | paginate: { itemsPerPage: 12, currentPage: p }">
        <div class="card card-person">
          <a  (click)="ViewUser(user)">
            <img class="card-img-top" src="http://res.cloudinary.com/dfg5p1pww/image/upload/v{{user.picVersion}}/{{user.picId}}"
            alt="Card image" style="width:100%">
            <div class="card-body">
              <h4 class="card-title"> {{user.firstName}} {{user.lastName}}</h4>
              <p class="card-text">{{user.age}}</p>
              <p class="card-text">{{user.country}},{{user.city}}</p>
              <p class="material-icons" *ngIf="CheckIfOnline(user.username)">online</p>
              <a class="btn button-image closeButton btn-message" [routerLink]="['/chat', user.username]">Message</a>
            </div>
          </a>
        </div>
      </div>
    </div>

CSS

.card-img-top {
    position: relative;
    overflow: hidden;
    height: 200px;
    width: auto
}

.card-person {
  margin: 50px auto;
  background-color: #ffffff;
  border-radius: 0;
  border: 0;
  box-shadow: 1em 1em 2em rgba(0,0,0,.2);
}

.card-text {
 margin-bottom:0.2rem
}

.btn-match,
.btn-message {
  color:#ffffff;
  background: #FF512F;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FF512F, #DD2476);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FF512F, #DD2476); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
transition: all .4s;
margin:5px;
border-radius:40px
}

.button-image:before {
  content: "";
  width: 23px;
  height: 23px;
  display: inline-block;
  background-size: 100%;
  vertical-align: text-top;
  background-color: transparent;
  background-position : center center;
  background-repeat:no-repeat;
}

.btn-match.closeButton:before{
   background-image : url('../../../assets/images/heart-white.png');
}

.btn-message.closeButton:before{
  background-image : url('../../../assets/images/chat-white.png');

}

a.fill {
  width: 100%;
  height: 50px;
  }

什么会导致这样的问题？如何在 Bootstrap 4 中解决这个问题，使所有类型的图像看起来都正常？

Answer 1

此问题是由 background-size CSS 属性引起的。当设置为 100% 时，浏览器会尝试拉伸(stretch)背景图像以在两个方向上填充容器。

background-size 属性接受多个“关键字”输入以及百分比或像素大小。

background-size:cover 将使最小尺寸填充容器，其余图像“溢出”隐藏。

background-size:contain 将使图像的最大部分填充容器，任何多余部分都具有“信箱”效果。

然后您可以使用 background-position 来定义多余内容的剪切位置或容器的哪一部分暴露。

body {
  font-family: Arial, Helvetica, Sans-Serif;
}
img {
  width: 250px;
}

hr {
  margin: 20px 0;
}

div {
  position: relative;
  width: 300px;
  height: 300px;
  margin-bottom: 20px;
  border: 1px solid #dadada;
  background-image: url(https://images.unsplash.com/photo-1556229040-2a7bc8a00a3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9);
  background-color: blue;
  background-position: center center;
  background-repeat: no-repeat;
}

span {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: white;
  text-shadow: 0 0 3px rgba(0,0,0,0.2);
}

.cover {
  background-size: cover;
}

.contain {
  background-size: contain;
}

.pos {
  background-position: top left;
}

<img src="https://images.unsplash.com/photo-1556229040-2a7bc8a00a3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" />
<p>Image from Unsplash</p>

<hr />

<div class="cover">
  <span>background-size:cover</span>
</div>

<div class="contain">
  <span>background-size:contain</span>
</div>

<div class="cover pos">
  <span>Cover + background-position: left top</span>
</div>

<div class="contain pos">
  <span>Contain + background-position: left top</span>
</div>