Изображение на карте выглядит очень плохо из-за стилей (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% браузер пытается растянуть фоновое изображение, чтобы заполнить контейнер в обоих направлениях.

Свойство 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>

Answer 2

если я прав, вы используете .card-img-top, поэтому добавьте класс .card-person.card-img-top