Display image inside the box without stretching it - html

Question

I developed an image gallery.
My problem is that I am using 100% height and sometimes the image stretches, ending up losing quality.
Is there a way to place the image in the center of the box without stretching it and in the center if it is not tall enough to fill the box completely?
Demo
My code
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="row">
<div class="drop dropp">
<div class="abc">
<ngb-carousel style="outline: none;" id="carousel" #carousel *ngIf="data" data-interval="false"
data-ride="carousel" data-pause="hover" (slide)="change($event)">
<ng-template *ngFor="let imgIdx of data; let i = index" [id]="i" ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="imgIdx.image" style="border-radius: 8px; object-fit: fill;" class="img-responsive">
</div>
</ng-template>
</ngb-carousel>
</div>
</div>
<div class="row">
<div class="Upcard" *ngFor="let imgIdx of belowImageData; let i = index">
<img class="img-responsive" [src]="imgIdx.image" style="width: 100%; object-fit: fill; height: 100%; border-radius: 8px;">
</div>
</div>
</div>
</div>
**My Problem **
As you can see in the image, it fills the whole box but is deformed :( I want it not to lose quality and if it doesn't have enough height, stay centered on the box. I want the box to have a fixed height.

Answer 1

If you don't care about the old browsers you can use object-fit property on the img directly.
for example:
object-fit: cover;
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Otherwise you can add an empty div, give it the full size of the box, and use the image as a background of that div. Then use background-size property.
Hope it helps.

Answer 2

I have tested the code, you can try adding the below code in css.edit and take a look
.img-responsive {
object-fit: contain; height:200px!important;
}
or to need all images to fit properly you have to remove the div global height 100 percentage. and set the height specific for each div. so you don't need height parameter in .img-responsive class.