0

I am trying to build a full screen 'modal' that displays images. I am making the modal by creating a div with maximum height and width, giving it a large z-index & fixed position.

Inside that modal, I have placed an image. I am trying to automatically size the images with this css:

.center {
      width: 100%;
      object-fit: contain;
      height: 100%;
    }

This works on desktop, but on mobile the browser address bar, tabs, and other controls often overlap the content requiring the user to scroll to see it. Is it possible for my image to fit inside the available space and be entirely visible without scrolling? Do I need to account for the extra space the browser could take up (maybe with padding or margins) and just consider it lost? In my actual implementation, we want to disable scrolling because this is a fullscreen modal (using react-scrolllock).

My Example code is below, which can also be found here: https://github.com/ericdcobb/fullscreen-image

and is hosted as a github page: https://ericdcobb.github.io/fullscreen-image/

<html>
<head>
  <style>
    .full {
      right: 0;
      bottom: 0;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100vw;

      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      z-index: 12348;
      border: 0;
      margin: 0;
      background: #222222;
    }

    .center {
      width: 100%;
      object-fit: contain;
      height: 100%;
    }
  </style>
</head>
<body>
<div class="full">
  <img class="center" src="Hello%20World.jpg"/>
</div>
</body>
</html>
eric
  • 2,699
  • 4
  • 29
  • 40
  • 1
    Mobile browsers do this on purpose when using viewport units to prevent constantly re-rendering layouts as UI shifts. More about it [here](https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser) – Chris B. May 15 '19 at 20:34

1 Answers1

1

You can use the object-fit tag. Try it like this:

<style>
.center {
    display: block;
    position: relative;
    width: 100%;
    object-fit: contain;
}

Aileen Lee
  • 11
  • 2