Отображать изображение внутри коробки, не растягивая его - PullRequest
Новая
       20

Отображать изображение внутри коробки, не растягивая его

0 голосов
/ 05 марта 2020

Я разработал галерею изображений.

Моя проблема в том, что я использую 100% высоты, а иногда изображение растягивается, что приводит к потере качества.

Есть ли способ разместить изображение в центре коробки, не растягивая ее, и в центре, если она недостаточно высока, чтобы полностью заполнить коробку?

Демо

Мой код 

<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>

** Моя проблема **

Как вы можете видеть на изображении, она заполняет всю коробку, но деформируется :( Я хочу, чтобы она не теряла качество, и если у него недостаточно высоты, оставайтесь в центре окна. Я хочу, чтобы окно имело фиксированную высоту.

Ответы [ 2 ]

1 голос
/ 05 марта 2020

Если вам не нужны старые браузеры, вы можете напрямую использовать свойство подгонки объекта на img.

, например: 

object-fit: cover;

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

В противном случае вы можете добавить пустой div, задать ему полный размер окна и использовать изображение в качестве фона этого div. Затем используйте свойство background-size.

Надеюсь, это поможет.

0 голосов
/ 05 марта 2020

Я протестировал код, вы можете попробовать добавить приведенный ниже код в css .edit и посмотреть 

 .img-responsive {
  object-fit: contain; height:200px!important;
}

или чтобы все изображения подходили по размеру, вам нужно удалить div global высота 100 процентов. и установите высоту, указанную c для каждого деления. так что вам не нужен параметр высоты в .img-отзывчивом классе.

...