Carousel dimensionnement des images suivant taille écran

Bonjour, je développe une petite application angular où je veux implémenter un carousel d'images. Je me suis basé sur un exemple que j'ai trouvé à cette adresse : https://stackblitz.com/edit/angular-...e=package.json.

J'ai reproduit la même chose dans mon application. Voici comment je l'ai intégré dans mon template :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <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%">

Quand je déploie mon application, et consulte la page sur mon browser avec une largeur width=1200px, j'obtiens le résultat suivant

Pièce jointe 513261

Comme vous pouvez le voir, j'ai un soucis avec la hauteur de mon image principale.
Quand je réduit la largeur du browser jusqu'à width=960px, la hauteur de mon image principale se réduit encore plus :

Pièce jointe 513264

Comme vous pouvez le voir, j'ai encore un soucis qui s'aggrave encore plus avec la hauteur de mon image principale.
Quand je réduit la largeur du browser jusqu'à width=650px, la hauteur de mon image principale se réduit encore plus :

Pièce jointe 513269

Comme vous pouvez le voir, j'ai encore un soucis qui s'aggrave encore plus avec la hauteur de mon image principale.
Quand je réduit la largeur du browser jusqu'à width=564px, la hauteur de mon image principale se réduit encore plus jusqu'à disparaitre:

Pièce jointe 513272

En résumé, j'ai un gros problème avec la hauteur de mon image principale (je voudrais qu'elle garde une hauteur proportionnelle avec la largeur), qui s'aggrave quand je réduit la largeur de mon browser. Pouvez vous me donner votre aide pour que l'image principale garde une hauteur proportionnelle avec la largeur et ceci même quand on réduit la largeur du browser ? Merci