pixi.jsで大きい画像をcanvasの上下中央比率を保って表示したい

pixi.jsでwidth 100% height 100vhのスライダーを勉強として作っています。
参考サイト( https://feel.kiyomizudera.or.jp/ )

画像をcanvasの上下中央配置して、比率をたもちたいのです。
現状は、スライダー画像(Sprite)を配列にして、Containerに代入しました。
containerを触るのか、containerの中のspriteを触るのか、いまいち方法がわかりません。
アドバイスいただきたいです。

pug
1.canvas-wrap
2  canvas#myCanvas

scss
1.canvas-wrap{
2    width: 100%;
3    height: 100vh;
4    overflow: hidden;
5    canvas{
6        display: block;
7        width:100%;height:100%;
8    }
9}

JS
1const canvasWidth = $("#myCanvas").width();
2const canvasHeight = $("#myCanvas").height();
3const app = new PIXI.Application({
4 view: document.getElementById("myCanvas"),
5 width:canvasWidth,
6 height:canvasHeight,
7 autoResize: true,
8 autoDensity: true,
9 resolution: devicePixelRatio
10})
11const container = new PIXI.Container();
12		container.interactive = true;
13		app.stage.addChild(container);
14
15		let imageResources = [];
16		let slidesSprite = [];
17		const setImage=()=>{
18			const slieds = [
19				{name: "slide0", url:"/assets/img/img-01.jpg"},
20				{name: "slide1", url:"/assets/img/img-02.jpg"},
21				{name: "slide2", url:"/assets/img/img-03.jpg"}
22			]
23	
24
25			app.loader
26			.add(slieds)
27			.load((loader,resources)=>{
28				console.log(resources);
29				const setSlide = () => {
30					imageResources.push(resources["slide0"],resources["slide1"],resources["slide2"])
31					for(let i=0; i<imageResources.length; i++){
32						slidesSprite.push(new PIXI.Sprite(imageResources[i].texture))
33					}
34					container.addChild(slidesSprite[1])
35					
36					console.log(app.screen.width);
37					
38					
39				}
40				setSlide();
41				
42			})
43		}
44
45		
46		setImage();