Responsive layout with design ratio?

I used fit design but encountered a situation where there might be a black border. How can I get the background according to the viewport of the screen and the container content still follow the designed ratio? I have used the fit Height , Width option in project settings

adaptScreen() {
        const rate = window.innerWidth / window.innerHeight
        const width: number = window.innerWidth
        const height: number = window.innerHeight
        if (rate > 21 / 9) {
            view.setDesignResolutionSize(window.innerWidth, window.innerHeight, ResolutionPolicy.SHOW_ALL)
            Adapt.screenScale =  height / this.initHeight
            //this.node.setScale(Adapt.screenScale, Adapt.screenScale);
            Adapt.adaptWidth=this.initWidth
            Adapt.adaptHeight=this.initHeight
            this.UICamera.orthoHeight=Adapt.adaptHeight/2
        }
        else if (rate < 16 / 9) {
            view.setDesignResolutionSize(width, width*1.778, ResolutionPolicy.FIXED_WIDTH)
            //view.setDesignResolutionSize(900, 1200, ResolutionPolicy.FIXED_WIDTH)
            Adapt.screenScale =  width / (this.initWidth*0.762)
            //this.node.setScale(Adapt.screenScale, Adapt.screenScale);
            Adapt.adaptWidth=1600
            Adapt.adaptHeight= Adapt.adaptWidth*height/width
            this.UICamera.orthoHeight=Adapt.adaptHeight/2
        }
        else {
            view.setDesignResolutionSize(width, height, ResolutionPolicy.FIXED_HEIGHT)
            //const rate = window.innerWidth / window.innerHeight
            //this.node.getComponent(UITransform).height = this.node.getComponent(UITransform).width / rate
            Adapt.screenScale =  height / this.initHeight
            //this.node.setScale(Adapt.screenScale, Adapt.screenScale);
            Adapt.adaptWidth=width/Adapt.screenScale
            Adapt.adaptHeight=this.initHeight
            this.UICamera.orthoHeight=Adapt.adaptHeight/2
        }
        this.tick++
        // if(this.tick>1) location.reload()
    }

Try customizing this code according to your requirement and calling it on window-resize,
This should do the thing,
But the main issue you may encounter is with the text boxes used in cocos, as whenever i tried clicking it, the text always seemed to be outside the text boxes.
If you dont have text boxes in your project or game, then this could do the thing.
Merry cristmas.