I have an image which width should be as large as possible and I want it's height to not exceed the height of the parent while also maintaining the aspect ratio of 16:9. The issue right now is, it works well till the screen size is 1591px, if it gets bigger than that, the height exceeds and the vertical scroll bar appears. I don't want that behavior. How can I achieve that?

CodePudding user response：

the scrollBar appears because of the overflow you can do 2 things

1. use the "overflow: hidden;"

body{
    overflow: hidden;
}

2. you can use max-width to determine the max-width of the element and set it on both of the elements

I hope it was helpful