2

I am trying to solve something that looked pretty straightforward at the beginning, but has developed into a little nightmare. I was able to code parts of the functionality described below, but not all together.

I have images as DataURLs on a website. Dimensions and aspect ratios of these images are variable. I want to create some kind of lightbox with the following characteristics (see scheme):

  • IMG (or DIV) with preserved aspect ratio (like object-fit: contain; or background-image: contain;)
    • responsive
    • nearly full screen with ~1em margin
    • horizontally and vertically centered
  • a DIV exactly overlying that IMG (or DIV) as container for blending a result image
  • another exactly overlying DIV as container for corner texts
  • as background canvas a full view port DIV (position: fixed; inset: 0; behaviour) with elevated brightness and backdrop-filter

I tried all of the related methods suggested here, but was not able to get the whole functionality. Is there any way to do this with HTML/CSS? Is there a (simple) way to achieve this in Javascript?

Sebastian Tschauner
  • 23
  • 4
  • this can probably help you: https://stackoverflow.com/a/65864592/8620333 – Temani Afif Feb 09 '21 at 09:02
  • Thank you! I will try to solve it with the clamp() method. – Sebastian Tschauner Feb 09 '21 at 10:03
  • @TemaniAfif Thank you for your suggestion! I was able to create a working solution with `clamp`: https://jsfiddle.net/m34z6uL2/5/ However, this is not working in Firefox (works in Android, Chrome, Opera). Any idea why? – Sebastian Tschauner Feb 09 '21 at 17:57
  • it's seems there is an issue with Firefox (even with my answer). Will try to figure out why – Temani Afif Feb 09 '21 at 21:32
  • check this: https://jsfiddle.net/hu4mLndb/1/ I changed the formula slightly so it can work on firefox – Temani Afif Feb 09 '21 at 21:57
  • @TemaniAfif: Thank you! It is getting better. Still, there is some issue when resizing the view port to a certain breakpoint (height or width), the stage will shrink down to nearly zero. – Sebastian Tschauner Feb 10 '21 at 08:24
  • Any other ideas how to solve my problem? @TemaniAfif suggestion works, but there are some issues with large screen sizes, especially in Firefox. – Sebastian Tschauner Feb 11 '21 at 13:03
  • So this is my final solution now: http://jsfiddle.net/04af5rmc/10/ I use Javascript to pass the aspect-ratio of the image to CSS. I adapted the solution from https://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-fill-screen-width-and-height-in-css. There are 2 different settings, 1 for landscape, and 1 for portrait images. This works in most browsers and has no screen size issues. – Sebastian Tschauner Feb 18 '21 at 11:42

0 Answers0