Images destroy the card format - html

Question

I have a grid layout of cards. When I upload photos to a product card, there are several times that the entire format of the card is damaged. That is, no labels, the name, the description of the product and some other things are not visible.
I am attaching 2 screenshots (one without and one with photos)
.bg-color {
background-color: #eee;
padding: 60px 0;
}
.containers {
width: 90%;
margin: 0 auto;
}
.title {
margin-bottom: 50px;
padding-bottom: 40px;
text-align: center;
position: relative;
}
.title::before {
content: '';
width: 200px;
height: 3px;
background-color: #dbdbdb;
position: absolute;
bottom: 15%;
left: 50%;
transform: translateX(-50%);
}
.title::after {
content: '\f005';
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: #dbdbdb;
width: 50px;
height: 20px;
text-align: center;
line-height: 20px;
position: absolute;
bottom: 10%;
left: 10%;
/* background-color: #eee;
*/
transform: translateX(-50%);
font-size: 16px;
}
.title p {
color: #999;
font-style: italic;
font-weight: 700;
margin: 0;
}
.title h1 {
font-size: 44px;
color: #131313;
font-weight: 900;
text-transform: capitalize;
}
.title h1 span {
color: #fa0;
}
.my-card {
transition: all .2s ease-in-out;
border-radius: 3px;
}
.card-main {
position: relative;
}
.price {
position: absolute;
background: #fa0;
font-weight: 700;
color: #ffff;
text-align: center;
display: block;
text-transform: uppercase;
height: 30px;
width: 50px;
border-radius: 0 15px 15px 0;
line-height: 30px;
font-style: italic;
left: -9px;
top: 30px;
}
.price::after {
border-top: 6px solid #c80;
content: '';
position: absolute;
bottom: -6px;
left: 0;
border-left: 8px solid transparent;
border-right: 0px solid transparent;
}
.label {
position: absolute;
top: 10px;
/* bottom: 104px;
*/
left: -9px;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
z-index: 2;
line-height: 100%;
color: #ffff;
border-radius: 3px;
padding: 5px 8px;
}
.label-green {
background: #5cb85c;
}
.label2 {
position: absolute;
top: 10px;
/* bottom: 104px;
*/
right: -9px;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
z-index: 2;
line-height: 100%;
color: #ffff;
border-radius: 3px;
padding: 5px 8px;
}
.label-red {
background: #C5312D;
}
.image img {
width: 100%;
height: 100%;
position: center;
}
.cart-line {
height: 2px;
background: #f1f1f1;
}
.cart-item {
text-align: center;
line-height: 45px;
background: #fa0;
/* background: rgb(199, 136, 53);
*/
transition: all 0.4s ease-in-out;
position: relative;
top: -30px;
}
.cart-item ul {
padding: 0;
margin: 0;
}
.cart-item ul li {
display: inline-block;
list-style-type: none;
position: relative;
font-size: 25px;
}
.cart-item ul li::after {
content: '';
width: 1px;
height: 18px;
background: rgba(255, 255, 255, .15);
position: absolute;
left: -2px;
top: 10px;
}
.my-card:hover .cart-item {
opacity: 1;
top: 0;
}
.item-container {
position: absolute;
right: -40px;
top: 10px;
z-index: 4;
transition: 0.6s;
opacity: 0;
}
.p {
border: 1px solid rgb(233, 233, 233);
border-radius: 2px;
height: 40px;
width: 40px;
cursor: pointer;
}
.p img {
width: 100%;
height: 100%;
opacity: 0.8;
}
.p img:hover {
opacity: 1;
}
.my-card:hover .item-container {
opacity: 1;
right: 10px;
}
.content {
padding: 16px 0;
text-align: center;
}
.content mat-card-title {
font-size: 16px;
color: #555;
font-weight: 700;
text-transform: capitalize;
transition: all .3s;
}
.content mat-card-title:hover {
color: #fa0;
text-decoration: none;
}
.content p {
margin-bottom: 0;
}
.content .description {
font-size: 15px;
color: #fa0;
font-weight: 500;
font-style: italic;
margin-right: 6px;
}
<section class="bg-color">
<div class="containers">
<mat-grid-list [cols]="breakpoint" rowHeight="500px" (window:resize)="onResize($event)">
<mat-grid-tile *ngFor="let item of pagedList">
<div>
<mat-card class="my-card">
<div class="card-main">
<div *ngIf="item.buy_price != 0">
<div class="label label-green">Buy NOW</div>
<div class="price">{{item.buy_price | currency:'EUR':true}}</div>
</div>
<div *ngIf="item.seller == username">
<div class="label2 label-red">My item</div>
</div>
<!-- Small images -->
<div class="item-container">
<div *ngIf="item.images.length!==0">
<div *ngFor="let image of item.images">
<div class="p"><img [src]="'data:image/jpeg;base64,' + image.imageByte" alt="item"> </div>
</div>
</div>
</div>
<!-- 1st image -->
<div class="image">
<div *ngIf="item.images.length==0">
<img src="/assets/images/no_image_found.jpg" alt="image">
</div>
<div *ngIf="item.images.length!=0">
<img [src]="'data:image/jpeg;base64,' + item.images[0].imageByte" alt="image">
</div>
</div>
<div class="cart-line"></div>
<div class="cart-item">
<ul>
<li><a routerLink="/item-detail/{{item.id}}"><i class="bi-basket"></i></a></li>
</ul>
</div>
</div>
<div class="content">
<mat-card-title>{{item.name.length>34?item.name.substring(0,30)+ "...":item.name}}</mat-card-title>
<p><span class="description">{{item.description.length>34?item.description.substring(0,30)+ "...":item.description}}</span></p>
</div>
</mat-card>
</div>
</mat-grid-tile>
</mat-grid-list>
</div>
</section>