How I can simulate css property 'background-size: cover'?

[Dok11]

I make a sprite with large texture (1920x1080) in the scene with size 1200x900, set anchor 0.5 and set position to center of the scene.

Of course part of the sprite go out from scene.

 

How I can repeat css property 'background-size: cover' or see fig.2 on the screen?

Do i need make special calculations or this feature already sold in pixijs?

 

My code:

// set object width big texturevar texture = PIXI.Texture.fromImage('/images/bg__main-scene.jpg');		var stageItemBackground = new PIXI.Sprite(texture);stageItemBackground.anchor.x = 0.5;stageItemBackground.anchor.y = 0.5;stageItemBackground.position.x = screenWidth/2;stageItemBackground.position.y = screenHeight/2;// set scenerenderer = PIXI.autoDetectRenderer(screenWidth, screenHeight, {backgroundColor: 0x000});document.getElementById('scene').appendChild(renderer.view);stage = new PIXI.Container();

[Dok11]

Note: if I set width and height as sizes of scene, then texture lose proportional

[mattstyles]

There isnt a shortcut method. You'll have to do the maths yourself!  

[Dok11]

There isnt a shortcut method. You'll have to do the maths yourself!

Ye, I did so. I calculated aspect ratio screen and sprite, then set size sprite... hmm, I thought, what the best way - change sizes or set scale?

[ivan.popelyshev]

Am I right that all exterior is static? If so, do it in DOM

 

I made it in https://github.com/ivanpopelyshev/railways/

That's the code: https://github.com/ivanpopelyshev/railways/blob/master/src/ui/canvasContainer.js

[labrat.mobi]

as mentioned, you need to take care of scaling yourself..

some related articles:

http://www.williammalone.com/articles/html5-game-scaling/

https://msdn.microsoft.com/en-us/hh969228.aspx

 

Tip: when aligning your canvas,, do not use style.top or style.left instead use "transform translate"..

[Dok11]

Am I right that all exterior is static? If so, do it in DOM

I made it in https://github.com/ivanpopelyshev/railways/

That's the code: https://github.com/ivanpopelyshev/railways/blob/master/src/ui/canvasContainer.js

DOM is good decision, but I need animate this. Because I collect elements of scene in JS. Do I right what pixijs can not control DOM? And I should use addChild?

[mattstyles]

Pixi is a canvas rendering library, so it does not manipulate any DOM.

 

CSS can support a wide range of animations, transforms and transitions so still might be the best option for you.

[Dok11]

Pixi is a canvas rendering library, so it does not manipulate any DOM.

CSS can support a wide range of animations, transforms and transitions so still might be the best option for you.

You right, response layout best making in html5. Pixi better working with static size elements as I can understand

[ivan.popelyshev]

Position, scale and rotation are first-class citizens in pixi. Width and height are calculated based on texture sized and children's sizes too. So its better to use scale instead of width/height.

[ScottL]

I looked for a solution to this problem and ended up finding this thread, but without an actual solution!

So I took the time to write a function that will make this easy for me in the future.  For anyone else that needs it, grab it here:

https://gist.github.com/ClickSimply/581823db9cdc8d94ed3f78c1a548f50d