Discussion :

[flamant]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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



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 :



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 :



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:




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

[flamant]

Bonjour, finalement, j'ai choisi un Carousel BootStrap décrit à cet adresse : https://www.freakyjolly.com/angular-...usel-tutorial/. Et ça marche bien. Merci pour votre lecture