0

I have an image where its height is set to a percentage value (e.g. 60%).

the problem is that in Safari browser when the browser navigation bars are hidden due to the user scrolling the image height increase (which I don't want).

I've also tried to use vh unit instead of percentage (but the issue is still not solved)

notice in the below image (side 2) how the height of the image increased when the navigation bars are hidden.

Is there any CSS or JavaScript trick to make image height 60% of screen height (but doesn't change when the top and bottom navigation bars are hidden)

enter image description here

Amjed Omar
  • 853
  • 2
  • 14
  • 30
  • 1
    Maybe provide a max-height to the image so that it doesn't scale beyond the set height – the.marolie Oct 25 '22 at 16:10
  • @the.marolie `max-height` will not solve this issue. because I can't set it to a `px` value since I want the image to be `60%` of screen. and if I set it to a percentage value (e.g. `60%`) that also will not solve the issue since the viewport height change when the navs are hidden. – Amjed Omar Oct 25 '22 at 16:16

0 Answers0