Scale camera to fit screen size unity

Question

My background and gameobjects are 2d sprites not UI images ,I want to know how to make my background scale with screen size and positions of 2d sprits on it don't change after building game (webGl) like scale canvas with screen size and anchor points in UI elements .

Before building the game

After building

Answer 1

You can adjust the camera's height so it scales with the width of the screen like so:

(Place this script on your Camera object)

[ExecuteInEditMode]
[RequireComponent(typeof(Camera))]
public class MatchWidth : MonoBehaviour {

    // Set this to the in-world distance between the left & right edges of your scene.
    public float sceneWidth = 10;

    Camera _camera;
    void Start() {
        _camera = GetComponent<Camera>();
    }

    // Adjust the camera's height so the desired scene width fits in view
    // even if the screen/window size changes dynamically.
    void Update() {
        float unitsPerPixel = sceneWidth / Screen.width;

        float desiredHalfHeight = 0.5f * unitsPerPixel * Screen.height;

        _camera.orthographicSize = desiredHalfHeight;
    }
}

If you're using a perspective camera, then instead you'd use...

public float horizontalFoV = 90.0f;

// ...

void Update() {
   float halfWidth = Mathf.Tan(0.5f * horizontalFoV * Mathf.Deg2Rad);

   float halfHeight = halfWidth * Screen.height / Screen.width;

   float verticalFoV = 2.0f * Mathf.Atan(halfHeight) * Mathf.Rad2Deg;

   _camera.fieldOfView = verticalFoV;
}

If you want to shrink your viewport to add letterboxes instead of showing additional height above/below, you can use the technique described in this answer.

Answer 2

Using 2D, you likely don't want to manipulate the camera. I recommend adjusting the scale of the background object (container or sprite).

[SerializeField] private Camera mainCamera;
[SerializeField] private SpriteRenderer spriteRenderer;

private void Start() {
    var spriteBounds = spriteRenderer.bounds; // Sprite to fit viewport
    var worldScale = mainCamera.ViewportToWorldPoint(Vector3.one);
    var localScale = 2 * Math.Max(
        worldScale.x / spriteBounds.size.x * transform.localScale.x,
        worldScale.y / spriteBounds.size.y * transform.localScale.y);

    transform.localScale = new Vector3(localScale, localScale, 1);
}

You can apply this script to the background sprite itself or to a container which holds the background sprite.

Answer 3

I think if you decrease the scale size to 1x from above the Game view, it will fit.