When uploading an image with a greater height and narrower width, it may appear distorted in the user cards on the website. Below are the HTML and CSS components used in our Angular framework:
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;
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;
}
If you encounter issues with image distortion in Bootstrap 4, check the aspect ratio of your images and adjust the container settings accordingly to ensure that all types of images display correctly.