使用引导程序使图像适合答案

【问题标题】：Making image fit using bootstrap使用引导程序使图像适合
【发布时间】：2022-10-20 02:46:42
【问题描述】：

我知道这个问题听起来一定很熟悉，我可以看到很多人问类似的问题，但没有一个答案对我有用。每个人都有相当具体的需求。我想了解基础知识，我可以解决其余的问题。

我有一个简单的 angular/bootstrap 网页。我制作了一个轮播组件，我想确保用户始终看到整个图像。我已经看到很多建议 img-fluid、max-with、max-height 等的答案，但没有什么对我有用。它适用于横向图像，但不适用于纵向图像。无论如何，我需要它始终显示整个图像。

这是基本的应用程序组件：

<app-nav-menu ></app-nav-menu>

<div style="padding:10px">
  <router-outlet></router-outlet>
</div>

router-outlet 转到这个“about-us”组件：

<div class="row">
    <div class="col">
        <app-carousel [slides]="slides"></app-carousel>
    </div>
</div>

轮播组件如下所示：

<div class="container">
    <div class="row">
        <div class="col">
            <div>
                <img [src]="slide.src">
                <p style="position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%);">
                    {{slide.text}}
                </p>
            </div>
        </div>
    </div>
</div>

如您所见，它非常简单。现在除了 p 标签中的一点点之外没有其他样式，它可以使图像中的文本居中。这现在不能正常工作，因为我认为我在尝试不同的解决方案时丢失了容器。我不喜欢 CSS，因为我不习惯它们，而且我喜欢查看它们所属的样式，以便更好地理解。但如有必要，请随时提出 CSS 解决方案。所以问题很简单：如何使图像始终适合屏幕而不向下溢出？谢谢

【问题讨论】：

图像不得失真 - 纵横比必须与原始图像保持一致。顶部/底部或左侧/右侧的空格以适合是可以的。也忽略 class="container" 或整个 div - 这是文本居中的后遗症，我将不得不再次这样做。
您是否尝试添加图像作为封面？

标签： html angular image-resizing

【解决方案1】：

您是否尝试过 object-fit 属性？

适合对象：封面；

如果您的图像纵横比良好，它会显示整个图像。

对象拟合：包含：

这显示了整个图像，但如果纵横比不好，它会在图像周围显示空白。

【讨论】：

【解决方案2】：

谢谢SureN。
我尝试了这两种方法，但它们都不起作用。如果我知道如何更好地使用它们，也许他们会这样做。最后，在 img 标签中，以下或多或少对我有用：

style="max-width: 100%; max-height: 100vh; display: block; margin-left: auto; margin-right: auto;"

它并不完美，但现在可以了！

【讨论】：