0

I'm trying to make a web image gallery for all my photos. And when i click an image i want it to pop up in full screen. I use a container to be able to add the pictures and an exit button.

Is there any way without Javascript to make the picture scale max in all directions, without loosing aspect? A portrait picture for example will at a desktop have a height at 100%, while on phone the width will have too be 100%.

if i add just the picture it will scale right, but inside the container it gets tricky for me. 

.container{
    margin-top: 1%;
    z-index: 20;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    max-height: 95%;
}

.container img {
   max-width: 100%;
   max-height: 100%;*/

}

<div class="container">
  <img src="IMG_9810.jpg"  class="imagepopup">
  <button class="btn">X</button>
</div>

enter image description here

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
perand
  • 15
  • 6
  • Possible duplicate of [How do you stretch an image to fill a
    while keeping the image's aspect-ratio?](https://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat)
     – cjl750 Mar 23 '19 at 22:30
  • 2
    Short answer: `.container img { width: 100%; height: 100%; object-fit: contain; }` should do pretty well in modern browsers, but for older browsers you need JavaScript to query the image's width and height and set either `width: 100%; height: auto` or `height: 100%; width: auto`. Either way that would assume that you change `.container` to fill the entire screen, though, rather than letting the size of the image determine its size. – cjl750 Mar 23 '19 at 22:34
  • Thanks for the help. But then the container will stretch, and be bigger than the image? or am i understanding this wrong? – perand Mar 23 '19 at 22:57
  • That is correct. I would recommend adding one more wrapper div. Have one outside div fill the whole screen (almost, at least), maybe have a background color to cover the page behind it, and have the close button be absolutely-positioned in the top corner of the screen relative to that outside div. Then `.container` would also fill the whole screen but would just be transparent background color, so it will just look like the image is sitting on top of the outer div. – cjl750 Mar 23 '19 at 23:10
  • thanks for the help. , that is what i have done. but maybe adding the exit button to the top right corner instead of picture is a good enough idea – perand Mar 23 '19 at 23:26
  • You can also absolute / fixed position the exit button so it won't interfere with the screen real-estate – aviya.developer Mar 24 '19 at 00:15

0 Answers0