使用引导程序使图像适合

Question

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

我有一个简单的角度/引导网页。我制作了一个旋转木马组件，我想确保用户总是看到整个图像。我看过很多答案，比如img fluid、max with、max height等等，但对我来说什么都不管用。这有点适用于风景图像，但不适用于肖像图像。我需要它始终显示整个图像。

以下是应用程序的基本组件：

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

路由器出口通向这个"；关于我们"；组件：

<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解决方案。所以问题很简单：如何使图像始终适合屏幕而不向下溢出？感谢

Answer 1

您尝试了object fit属性吗？

对象适合：封面；

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

对象适合：包含：

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

Answer 2

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

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

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