1

let parent = document.getElementById("parent");
let img = document.getElementById("img");

parent.addEventListener("click", function() {
  parent.style.display = "none";
});

img.addEventListener("click", function(e) {
  e.stopPropagation();
})
#parent {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: blue;
}

#img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
<div id="parent">
  <img src="https://dummyimage.com/600x400/000/fff" id="img">
</div>

Basically, what I want to achieve is a pop-up that covers the whole window and has a centered image that stretches to the maximum height or width (depending on image dimension) and preserves aspect ratio.The full image should still be visible. When you click on the remaining visible parent blue background, both the parent and the image should disappear.

The parent event is not triggering. But if I remove the CSS code, the event triggers. What is happening here?

atan
  • 58
  • 2
  • 10
  • Do you know the apect ratios of the images you use at run-time and could possibly add this data to the HTML output? – yunzen Apr 30 '21 at 07:55
  • @yunzen nope. I was thinking maybe there's a simple CSS solution to this but I guess I'll go the JavaScript way – atan Apr 30 '21 at 10:59

3 Answers3

1

An Image in HTML is a replaced element

If you inspect the img in your developer tools, you might recognize that the image element itself covers all of the parent (that's by means of width: 100%; height: 100%;).

The representation of the image on screen is altered by object-fit: contain;. But this does not change the dimensions of the image element itself. You can see that if I add a yellow background to the image element. This covers all of the blue parent

let parent = document.getElementById("parent");
let img = document.getElementById("img");

parent.addEventListener("click", function() {
  parent.style.display = "none";
});

img.addEventListener("click", function(e) {
  e.stopPropagation();
})
#parent {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: blue;
}

#img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: yellow;
}
<div id="parent">
  <img src="https://dummyimage.com/600x400/000/fff" id="img">
</div>

You need to try something different for your code to work as intended

Edit: changed the implementation

Example with image size 500 x 500

let parent = document.getElementById("parent");
let img = document.getElementById("img");

parent.addEventListener("click", function() {
  parent.style.display = "none";
});

img.addEventListener("click", function(e) {
  e.stopPropagation();
})
#parent {
  width: 100%;
  height: 100%;
  
  position: fixed;
  top: 0;
  left: 0;
  background-color: blue;
  
}

#img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
<div id="parent">
  <img src="https://dummyimage.com/500x500/f0f/000" id="img">
</div>

Example with image size 1000 x 600

let parent = document.getElementById("parent");
let img = document.getElementById("img");

parent.addEventListener("click", function() {
  parent.style.display = "none";
});

img.addEventListener("click", function(e) {
  e.stopPropagation();
})
#parent {
  width: 100%;
  height: 100%;
  
  position: fixed;
  top: 0;
  left: 0;
  background-color: blue;
  
}

#img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
<div id="parent">
  <img src="https://dummyimage.com/1000x600/f0f/000" id="img">
</div>

Example with image size 600 x 1000

let parent = document.getElementById("parent");
let img = document.getElementById("img");

parent.addEventListener("click", function() {
  parent.style.display = "none";
});

img.addEventListener("click", function(e) {
  e.stopPropagation();
})
#parent {
  width: 100%;
  height: 100%;
  
  position: fixed;
  top: 0;
  left: 0;
  background-color: blue;
  
}

#img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
<div id="parent">
  <img src="https://dummyimage.com/600x1000/f0f/000" id="img">
</div>
yunzen
  • 32,854
  • 11
  • 73
  • 106
  • Now I get it. But unfortunately the image still doesn't stretch. It is still centered but doesn't occupy the whole window. – atan Apr 29 '21 at 14:20
  • Your snippet only works because the image you used has a large dimension and most of the images I'm using are just around 500x500. But +1 for explaining the reason behind object-fit. – atan Apr 29 '21 at 14:28
  • @atan You are correct. I still haven't discovered a way of simulating `object-fit` contain without using `object-fit`. – yunzen Apr 30 '21 at 07:56
  • @atan I managed to solve the issue with image dimensions. Take a look at my edit – yunzen Apr 30 '21 at 08:32
  • @atan Did you check the Examples at the end of my answer? – yunzen Apr 30 '21 at 11:20
  • yep. I even tried using a 400x400 image but it's still just centered but not stretched vertically to occupy all available space while preserving aspect ratio. I have decided to use JavaScript instead but I'm still hoping for a CSS solution. – atan Apr 30 '21 at 11:28
  • Yeah, The technique only works to shrink images to fit the container. Stretching without aspect ratio distortion isn't possible without JS. – yunzen Apr 30 '21 at 11:30
0

child overlap the parent. child element takes full available space and it fully covers its parent element. so there no clickable area available for the parent element.

If you adjust the height and width of the child element then you can achieve this.

let parent = document.getElementById("parent");
let img = document.getElementById("img");

parent.addEventListener("click", function() {
  parent.style.display = "none";
});

img.addEventListener("click", function(e) {
  e.stopPropagation();
})
#parent {
  width: 100%;
  height: 100%;
  position:fixed;
  top: 0;
  left: 0;
  background-color: blue;
  display: flex;
    align-items: center;
    justify-content: center;
}

#img {
 overflow:hidden;
}
<div id="parent">
  <img src="https://dummyimage.com/400x400/000/fff" id="img">
</div>
Deepu Reghunath
  • 8,132
  • 2
  • 38
  • 47
  • But your code only centers the image. The image should also stretch out to the maximum height or width while retaining the aspect ratio and the full image should still be visible. – atan Apr 29 '21 at 12:34
  • The aspect ratio of the image is distorted. – yunzen Apr 29 '21 at 12:42
  • @DeepuReghunath it doesn't preserve the aspect ratio. – atan Apr 29 '21 at 15:26
  • @atan updated the solution with `overflow:hidden` – Deepu Reghunath Apr 30 '21 at 12:35
  • @atan if you want to maintain the height of the image to 100% add this `#img { height:100%; overflow:hidden; }` – Deepu Reghunath Apr 30 '21 at 12:48
  • @DeepuReghunath I want to maintain the height of the image to 100% if the height of the screen is less than the width of the screen and I want to maintain the width of the image to 100% if the width of the screen is less than the height of the screen. All this while preserving the aspect ratio of the image even if the screen is resized. I hope that makes it clear. – atan Apr 30 '21 at 13:24
0

Since I couldn't find a simple solution using CSS (considering that the problem isn't that complicated), I have decided to use a quick fix using JavaScript by dynamically adjusting image sizing.

I'm leaving my answer here for anyone who needs this. But I'm still hoping for a CSS solution for this one.

let parent = document.getElementById("parent");
let img = document.getElementById("img");

parent.addEventListener("click", function() {
  parent.style.display = "none";
});

img.addEventListener("click", function(e) {
  e.stopPropagation();
})

function stretchImage(){
    let w = this.innerWidth;
    let h = this.innerHeight;

    if(w < h){
        img.style.width = "100%";
        img.style.height = "auto";
    }else{
        img.style.width = "auto";
        img.style.height = "100%";
    }
}

window.onresize = stretchImage;
window.onload = stretchImage;
#parent {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;
}
<div id="parent">
  <img src="https://dummyimage.com/400x400/000/fff" id="img">
</div>

The script dynamically changes the image sizing depending on the width and height of the window using onload and onresize. This way, I don't even need to know the dimensions of the image.

Dharman
  • 30,962
  • 25
  • 85
  • 135
atan
  • 58
  • 2
  • 10