使用 object-fit: contain; 时如何删除 <img> 的背景层
How to remove background layer of an <img> when using object-fit: contain;
我正在尝试制作图像查看器,它在 window 的中心和 div 内部覆盖了 window 一个在 [=29= 上放大和缩小的图像] 通过使用 object-fit: contain; 调整大小以保持其默认比例;哪个工作正常。问题是当使用 object-fit: contain;它会缩放 的内容,并且有一些类似背景层的东西,这会阻止我点击叠加层 window,这样我就可以关闭视图。是否可以裁剪、剪切自动调整大小,使其始终与内容一样大。也许使用 clip:rect();。提前致谢。
我正在尝试删除蓝色背景,以便我可以单击背景并关闭叠加层 window,但仍然可以在不关闭叠加层的情况下单击图像。
示例: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>
解决方案 1
将任何对象的位置设置为 absolute
有点危险:它几乎忽略了它与其他对象在位置、比例等方面的任何关系
因此,我建议使用 position: relative;
作为图像容器并允许两个维度之一(我建议使用 height: 100%
和 width: inherit
或 auto
)自动缩放以保持纵横比。现代浏览器足够智能,通常可以正确地填充给定的区域而不留任何空隙。
另外,请记住使用 margin: auto;
使对象居中。
这应该可以解决您的问题:
<!--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 在这里:https://jsfiddle.net/uewog42m/25/
最后一个想法:如果将 CSS 和 HTML/JS 分开,调试起来会更容易!考虑为所有 CSS 代码使用单独的样式表。
解决方案 2
解决此问题的另一种方法是为图像使用容器并将其用于缩放。然后,将图像放入容器内并使用父级的尺寸。最后,切断溢出(如果有的话)。
或者,如果您不想剪切图像的一部分,请不要为 width/height 使用最大值并将图像居中。
它应该看起来像这样:
<!--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>
对我有用的解决方案:
<!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;
right: 0;
bottom: 0;">
<!--Overlay--WIndow-Content--Container------------------------------>
<div style="display: block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:rgb(255, 168, 68);
max-width: 80vw;
max-height: 80vh">
<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: auto;
height: auto;
max-height: 80vh;
max-width: 80vw;
" />
</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>
片段:
<!--Overlay--WIndow-Content--Container------------------------------>
<div style="display: block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:rgb(255, 168, 68);
max-width: 80vw;
max-height: 80vh">
<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: auto;
height: auto;
max-height: 80vh;
max-width: 80vw;
" />
</div>
没有额外的更干净 Div:
<img onmousedown="event.stopPropagation();" id="overlayImg" style="
position: relative;
border-radius: 10px;
border: 2px solid rgb(83, 82, 99);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 80vh;
max-width: 80vw;
" />
所以实际上我不需要 object-fit: contain;但只有
max-height: 80vh;
max-width: 80vw;
对于要调整大小的小图片
min-height:auto;
min-width: 50vh;
简直不敢相信就这么简单。它根据 window 调整大小并保持其比率,已使用 16:9、1:1 和 9:16 进行测试。
完整的工作代码:------------------------------------ ----------------------
<!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;
object-fit: contain;
}
.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;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;">
<img onmousedown="event.stopPropagation();" id="overlayImg" style="
position: relative;
border-radius: 10px;
border: 2px solid rgb(83, 82, 99);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 80vh;
max-width: 80vw;
min-height:auto;
min-width: 50vw;
" />
</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://store-guides2.djicdn.com/guides/wp-content/uploads/2017/09/Justen-Soule-Sunrise-Lake-Wake-Inspire-1-1.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>
我正在尝试制作图像查看器,它在 window 的中心和 div 内部覆盖了 window 一个在 [=29= 上放大和缩小的图像] 通过使用 object-fit: contain; 调整大小以保持其默认比例;哪个工作正常。问题是当使用 object-fit: contain;它会缩放 的内容,并且有一些类似背景层的东西,这会阻止我点击叠加层 window,这样我就可以关闭视图。是否可以裁剪、剪切自动调整大小,使其始终与内容一样大。也许使用 clip:rect();。提前致谢。
我正在尝试删除蓝色背景,以便我可以单击背景并关闭叠加层 window,但仍然可以在不关闭叠加层的情况下单击图像。
示例: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>
解决方案 1
将任何对象的位置设置为 absolute
有点危险:它几乎忽略了它与其他对象在位置、比例等方面的任何关系
因此,我建议使用 position: relative;
作为图像容器并允许两个维度之一(我建议使用 height: 100%
和 width: inherit
或 auto
)自动缩放以保持纵横比。现代浏览器足够智能,通常可以正确地填充给定的区域而不留任何空隙。
另外,请记住使用 margin: auto;
使对象居中。
这应该可以解决您的问题:
<!--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 在这里:https://jsfiddle.net/uewog42m/25/
最后一个想法:如果将 CSS 和 HTML/JS 分开,调试起来会更容易!考虑为所有 CSS 代码使用单独的样式表。
解决方案 2
解决此问题的另一种方法是为图像使用容器并将其用于缩放。然后,将图像放入容器内并使用父级的尺寸。最后,切断溢出(如果有的话)。 或者,如果您不想剪切图像的一部分,请不要为 width/height 使用最大值并将图像居中。
它应该看起来像这样:
<!--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>
对我有用的解决方案:
<!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;
right: 0;
bottom: 0;">
<!--Overlay--WIndow-Content--Container------------------------------>
<div style="display: block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:rgb(255, 168, 68);
max-width: 80vw;
max-height: 80vh">
<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: auto;
height: auto;
max-height: 80vh;
max-width: 80vw;
" />
</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>
片段:
<!--Overlay--WIndow-Content--Container------------------------------>
<div style="display: block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:rgb(255, 168, 68);
max-width: 80vw;
max-height: 80vh">
<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: auto;
height: auto;
max-height: 80vh;
max-width: 80vw;
" />
</div>
没有额外的更干净 Div:
<img onmousedown="event.stopPropagation();" id="overlayImg" style="
position: relative;
border-radius: 10px;
border: 2px solid rgb(83, 82, 99);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 80vh;
max-width: 80vw;
" />
所以实际上我不需要 object-fit: contain;但只有
max-height: 80vh;
max-width: 80vw;
对于要调整大小的小图片
min-height:auto;
min-width: 50vh;
简直不敢相信就这么简单。它根据 window 调整大小并保持其比率,已使用 16:9、1:1 和 9:16 进行测试。
完整的工作代码:------------------------------------ ----------------------
<!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;
object-fit: contain;
}
.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;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;">
<img onmousedown="event.stopPropagation();" id="overlayImg" style="
position: relative;
border-radius: 10px;
border: 2px solid rgb(83, 82, 99);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 80vh;
max-width: 80vw;
min-height:auto;
min-width: 50vw;
" />
</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://store-guides2.djicdn.com/guides/wp-content/uploads/2017/09/Justen-Soule-Sunrise-Lake-Wake-Inspire-1-1.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>