在框内显示图像而不拉伸它答案

【问题标题】：Display image inside the box without stretching it在框内显示图像而不拉伸它
【发布时间】：2020-06-17 23:09:20
【问题描述】：

我开发了一个图片库。

我的问题是我使用了 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>

**我的问题**

正如您在图片中看到的那样，它填满了整个盒子但变形了 :( 我希望它不会失去质量，如果它没有足够的高度，请保持在盒子的中心。我希望盒子有固定高度。

【问题讨论】：

适合的对象应该是覆盖而不是填充
@Wimanicesir 但是，如果图像的高度和宽度非常低，则不会使用此选项进行拉伸？
如果我们使用object-fit：cover；它将切断图像的侧面，保留纵横比，并填充空间
@Wimanicesir 我认为我的问题出在高度的 abc 类中：100%;如果您将其置于自动状态，则图像永远不会变形。我只是不能以 div 为中心。我对其进行了测试，但在某些图像中它最终会损失很多质量
如果图像小于容器。它会变得比原来更大。因此，您要么失去质量，要么以其原始格式显示图像。还是我错了？

标签： html css angular bootstrap-4 ng-bootstrap

【解决方案1】：

如果您不关心旧浏览器，您可以直接在 img 上使用 object-fit 属性。

例如：

object-fit: cover;

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

否则，您可以添加一个空 div，将其设置为框的完整大小，然后将图像用作该 div 的背景。然后使用 background-size 属性。

希望对你有帮助。

【讨论】：

但是如果图像的高度和宽度非常低，使用这个选项就不会被拉伸？
它应该适合整个父容器（或者如果是 img 则适合自身）。最短的一侧将完全可见，如果最长的一侧比容器大，则取决于从容器上切下的比例。但如果你不想剪掉它，也许你应该使用 object-fit/background-size: contains。

【解决方案2】：

我已经测试了代码，你可以尝试在css.edit中添加下面的代码看看

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

或者要使所有图像都适合，您必须删除 div 全局高度 100 百分比。并为每个 div 设置特定的高度。所以你不需要 .img-responsive 类中的高度参数。

【讨论】：

我不想给图像一个固定的高度，我希望它居中，但感谢尝试帮助我
你能测试“object-fit: contains;”吗？掩体
我认为我的问题出在高度的 abc 类中：100%;如果您将其置于自动状态，则图像永远不会变形。我只是不能以 div 为中心