Html 角度旋转木马无法提供预期的结果

我正在开发一个小的角度应用程序，我想使用一个图像转盘。我以我在以下地址找到的一个例子为基础：

我在我的申请表中复制了同样的内容。以下是我如何将其集成到我的模板中：

<mat-toolbar color="primary">
  <div style="width:100%;" class="md-toolbar-tools" >
    Detail de l'annonce
    <span flex></span>
  </div>
</mat-toolbar>
<div fxLayout="row">
  <div fxFlex="20%"></div>
  <div fxFlex="60%">
    <mat-card>
        <mat-card-content>
                    <div fxLayout fxLayoutAlign="center center">
                        <!-- <img src="./../assets/image/image1.jpg" alt="Avatar" > -->
                        <app-carousel [autoPlayDuration]="5000" animation="slide" [isNavigationVisible]="true" [isThumbnailsVisible]="true" [slides]="slides"
                        [slideTemplateRef]="slide" [thumbnailTemplateRef]="thumbnail"></app-carousel>
                        <ng-template #slide let-slide>
                            <div [ngStyle]="{
                                    'background-size': 'cover',
                                    'background-image': 'url(' + slide.url + ')',
                                    'background-repeat': 'no-repeat',
                                    'width': '100%',
                                    'height': '100%'
                                }">
                            </div>
                        </ng-template>
                        <ng-template #thumbnail let-slide>
                                <div [ngStyle]="{
                                        'background-size': 'cover',
                                        'background-image': 'url(' + slide.url + ')',
                                        'background-repeat': 'no-repeat',
                                        'background-position': 'center center',
                                        'width': '100%',
                                        'height': '100%'
                                    }"></div>
                        </ng-template>                      
                    </div>
                    <hr color="blue" width="100%">

安奈斯详图

正如你所看到的，我对主图像的高度有一个问题

当我将浏览器的宽度减小到宽度=960px时，主图像的高度会收缩得更大：


正如你所看到的，我有一个问题，随着主图像的高度而恶化得更多

当我将浏览器的宽度减小到width=650px时，主图像的高度会缩小得更多：


正如你所看到的，我有一个问题，随着主图像的高度而恶化得更多

当我将浏览器的宽度减小到width=564px时，主图像的高度会进一步缩小，直到消失：


总之，我对主图像的高度有一个很大的问题（我希望高度与宽度成比例），当我减小浏览器的宽度时，它会降低。你能给我一个帮助，使主图像保持与宽度成比例的高度，这，即使我减少了浏览器的宽度？谢谢
您真的想使用您自己的旋转木马实现吗？或者您可以使用第三方的，比如ng bootsrap one？如果你还想要它，你能帮我省下你的stackblitz版本吗？你好yazantahhan，根据你的建议，我选择了一个引导转盘。本地址给出了一个示例。谢谢