CODEWITHSUNDEEP
htmlcssangularbootstrap-4ng-bootstrap
Steve Mc
Steve Mc

Reputation: 155

Display image inside the box without stretching it

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.

Upvotes: 0

Views: 792

Answers (2)

Anoop P S
Anoop P S

Reputation: 782

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.

Upvotes: 0

dako
dako

Reputation: 1163

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.

Upvotes: 1

Related Questions