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?
Asked
Active
Viewed 676 times
2
-
So do you want the image's height to be the maximum possible but not more than 100vh? Perhaps you could show us a code snippet where you set the height of the parent. See https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Jun 04 '22 at 11:45
-
I have given it's parent's height to 70vh. My desire is to make sure users don't see the vertical scroll bar. In order to do that, I believe, the height of the image must not exceed the height of the parent(70vh). But, the height is calculated dynamically base on the width. So, to limit the height, I guess we have to limit the width. How will I be able to achieve that?? – Nyi Nyi Hmue Aung Jun 05 '22 at 05:48
-
`calc()` may be able to help in some way. https://developer.mozilla.org/en-US/docs/Web/CSS/calc – ethry Jun 05 '22 at 07:05
2 Answers
0
the scrollBar appears because of the overflow you can do 2 things
- use the "overflow: hidden;"
body{
overflow: hidden;
}
- 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

Ori Guy
- 111
- 3
0
UPDATE: the original answer assumed from the question that the image was an HTML img. The solution was to set width to 100% [of its container] and height to 70vh and use object-fit.
However, it is not an img it is a canvas.
The required aspect ratio is known to be 16 / 9. This snippet therefore sets the max-width to 100% (of whatever is the container) and the max-height to 70vh.
This way there can never be any overflow and the canvas will be as big as it can be within those constraints.
body {
width: 100vw;
margin: 0;
}
canvas {
max-width: 100%;
max-height: 70vh;
aspect-ratio: 16 / 9;
background: green;
}
<canvas width="1600" height="900"></canvas>

A Haworth
- 30,908
- 4
- 11
- 14
-
But, its not html image. So there is no object-fit contain available. I will have to calculate the height and width manually. Any idea? – Nyi Nyi Hmue Aung Jun 05 '22 at 09:24
-
Sorry I'm lost. If it's not an HTML img what is it? Could you put the relevant HTML into your question so we can see how you are rendering it? – A Haworth Jun 05 '22 at 09:33
-
It's actually an image inside canvas. I believe I can't give it any css style like object-fit: contain. Correct me if I am wrong. I will try to make a demo. Essentially, I need to maintain the aspect ratio of the image while making sure vertical scroll bar doesn't appear. – Nyi Nyi Hmue Aung Jun 05 '22 at 09:47
-
Well the use of canvas was totally unclear from your question - it shows the importance of adding the HTML structure to your question. And show how the canvas initial sizing is decided. – A Haworth Jun 05 '22 at 09:53
-
I think, we can just think of it like a div. I can give it height and width, but not other css properties. So, if the height of the canvas img reaches the parent's maximum height, I think I can just stop increasing the width. Since the height only gets enlarged as the width increases. But, I am not sure how to calculate yet. I thought mentioning Canvas was just unnecessary. Sorry for the confusions. – Nyi Nyi Hmue Aung Jun 05 '22 at 09:57