I am trying to make image viewer, which has overlay window with div in the center and inside the div an image that scales up and down on window resize that keeps its default ratio by using object-fit: contain; which is working ok. The problem is that when using object-fit: contain; it scales the content of the and the has someting like background layer which stops me from clicking on the overlay window so I can close the view. Is it possible to crop, cut auto resize the so it is always big as the content. Maybe using clip:rect();. Thanks in advance.
I am trying to remove the blue background so I can click on the background and close the overlay window, but still keep the ability to click on the image without closing the overlay.
Example: https://jsfiddle.net/qwdnkxLt/
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Show Image</title> <style> html { margin: 0; padding: 0; width: 100%; height: 100%; /* --scrollbarBG: rgb(70, 103, 109); --thumbBG: rgba(81, 74, 85, 0.78); */ } /*--------BODY--------------------------------------------------------------------*/ body { margin: 0; padding: 0; background-color: rgb(40, 37, 44); width: 100%; height: 100%; } /* --------Content - Item---IMG-----*/ .contentContainer_Item { /* width: 250px; height: 150px; */ width: 17em; height: 10em; box-shadow: 0 0 10pt 3pt rgb(0, 0, 0); /* filter: drop-shadow(0 0.2rem 0.25rem rgb(0, 0, 0)); */ border-radius: 5px; border: solid 2px rgb(17, 17, 22); transition: transform 0.5s ease; display: block; } .contentContainer_Item:hover { box-shadow: 0 0 5pt 2pt rgba(33, 182, 216, 0.39); border: solid 2px rgb(29, 221, 189); border-radius: 5px; filter: saturate(3) } .contentContainer_Item_Margin { margin: 20px; float: left; text-align: center; color: rgb(5, 163, 255); text-decoration: none; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; } .contentContainer_Item_Margin:hover { color: rgb(5, 255, 255); } .contentContainer_Item_Holder { position: relative; display: inline-block; } .contentContainer_Item_Holder_Image_Viewer { width: 50px; height: 50px; position: absolute; z-index: 4; bottom: 50px; right: 30px; cursor: zoom-in; border-radius: 8px; box-shadow: 0 0 5px 5px rgba(0, 217, 255, 0.811); border: 1px solid rgb(112, 197, 236); } img.view-Img-Button { content: url('https://iso.500px.com/wp-content/uploads/2016/03/stock-photo-142984111.jpg'); } </style></head><body> <!--Overlay-Window-------------------------------> <div id="overlayWindow" onmousedown="this.style.display='none';" style="display: none; background-color: rgba(9, 21, 34, 0.7); position: fixed; z-index: 100; background: url(https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg) no-repeat center center fixed; background-size: 100% 100%; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0;"> <!--Overlay--WIndow-Content--Container------------------------------> <div style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color:rgb(255, 168, 68); width: 80%; height: 80%;"> <img onmousedown="event.stopPropagation();" id="overlayImg" style="position: absolute; border-radius: 100px; background-color:rgba(24, 129, 190, 0.938); object-fit: contain; width: 100%; height: 100%;" /> </div> </div> <!--Holder::::::::::::::::::::::::::::::::::::::::::::::--------------------------------> <div class="contentContainer_Item_Holder"> <!--Img Viewer Button--------------------------------> <img onmousedown="ViewImage('calcArea')" class="view-Img-Button contentContainer_Item_Holder_Image_Viewer"></img> <!--Img----------------------------------------------> <a href="https://github.com/stefan27dk/AutoFOCUS" target="_blank" class="contentContainer_Item_Margin"> <img id="calcAreaThumb" alt="Calc. Area of Graf" class="contentContainer_Item"></img> Calc. Area of graf - "JS"</a> </div> <!---Images--Storage------------------------------------------------> <script> var calcArea = 'https://helpx.adobe.com/content/dam/help/en/lightroom-cc/how-to/share-photos-on-web-gallery/_jcr_content/main-pars/image/share-photos-on-web-gallery_1800x1012.jpg'; document.getElementById('calcAreaThumb').style.content = `url(${calcArea})`; </script> <!---Overlay Window---::JS::---------------------------------------------> <script> function ViewImage(imgName) { document.getElementById("overlayWindow").style.display = 'block'; // Show overlayWindow document.getElementById('overlayImg').src = window[imgName]; // Static img Tag } </script></body></html>Advertisement
Answer
Solution 1
Setting the position of any object to absolute is a little dangerous: it makes it ignore almost any relationship it has with other objects regarding position, scale etc.
As such, I would recommend using position: relative; for your image container and allowing one of the two dimensions (I recommend using height: 100% and width: inherit or auto) to scale automatically to maintain the aspect ratio. Modern browsers are smart enough to usually fill in the area given properly without leaving any gaps.
Also, remember to use margin: auto; to center your objects nicely.
This should solve your problem:
<!--Overlay--WIndow-Content--Container------------------------------><div style="display: block; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color:rgb(255, 168, 68); width: auto; height: 80%;"> <img onmousedown="event.stopPropagation();" id="overlayImg" style=" display: block; position: relative; margin: auto; border-radius: 100px; background-color:rgba(24, 129, 190, 0.938); object-fit: contain; width: inherit; height: 100%; " /> </div> </div>JSFiddle here: https://jsfiddle.net/uewog42m/25/
A final thought: it is easier to debug if you keep your CSS and HTML/JS separate! Consider using a separate stylesheet for all your CSS code.
Solution 2
Another way to approach this problem, is to use a container for the image and use it for the scaling. Then, place the image inside the container and use the parent’s dimensions. Last, cut the overflow (if any). Or if you don’t want to cut part of the image, don’t use max values for the width/height and center the image.
It should look something like this:
<!--Overlay--WIndow-Content--Container------------------------------><div style="display: block; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color:rgb(255, 168, 68); width: auto; height: 80%;"> <div id="wrapper" style=" display: block; position: relative; border-radius: 100px; overflow: hidden; margin: 0; "> <img onmousedown="event.stopPropagation();" id="overlayImg" style=" display: block; position: relative; background-color:rgba(24, 129, 190, 0.938); object-fit: contain; width: 100%; height: 100%; " /> </div></div>