2

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?

Nyi Nyi Hmue Aung
  • 587
  • 1
  • 7
  • 19
  • 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 Answers2

0

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

  1. use the "overflow: hidden;"
body{
    overflow: hidden;
}
  1. 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