html - 如何对齐脚本中没有父级的图像?
问题描述
我想创建一个图像库,其中部分图像被隐藏并在单击时显示。我的主要问题是,单击裁剪后的图像后如何使显示的图像居中?这些图片可能有助于理解我的问题。
到目前为止,这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid-container {
margin: auto;
max-height: 600px;
max-width: 1400px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.little-finger-klein {
height: 300px;
width: 700px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/little-finger-klein.png') no-repeat;
}
.little-finger-gross {
position: absolute;
height: 600px;
width: 1400px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/little-finger-ganz.png') no-repeat;
}
.justate-klein {
height: 300px;
width: 700px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/just-ate-klein.png') no-repeat;
}
.justate-gross {
position: absolute;
margin-left: auto;
margin-right: auto;
height: 600px;
width: 1400px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/just-ate-ganz.png') no-repeat;
}
.socket-klein {
height: 300px;
width: 700px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/socket-klein.png') no-repeat;
}
.socket-gross {
position: absolute;
left: 8px;
top: 8px;
height: 600px;
width: 1400px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/socket-ganz.png') no-repeat;
}
.pitschi-klein {
height: 300px;
width: 700px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/pitschi-klein.png') no-repeat;
}
.pitschi-gross {
position: absolute;
left: 8px;
top: 8px;
height: 600px;
width: 1400px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/pitschi-ganz.png') no-repeat;
}
</style>
<title>Gallery</title>
</head>
<body>
<div class="grid-container">
<div class="column">
<div id="littlefingerklein" class="little-finger-klein"></div>
<div id="socketklein" class="socket-klein"></div>
</div>
<div class="column">
<div id="justateklein" class="justate-klein"></div>
<div id="pitschiklein" class="pitschi-klein"></div>
</div>
</div>
<script>
var light = document.getElementById('littlefingerklein');
light.addEventListener('click', function(light){
light.target.classList.toggle('little-finger-gross');
})
var light2 = document.getElementById('justateklein');
light2.addEventListener('click', function(light2){
light2.target.classList.toggle('justate-gross');
})
var light3 = document.getElementById('socketklein');
light3.addEventListener('click', function(light3){
light3.target.classList.toggle('socket-gross');
})
var light4 = document.getElementById('pitschiklein');
light4.addEventListener('click', function(light4){
light4.target.classList.toggle('pitschi-gross');
})
</script>
</body>
</html>
解决方案
这些图像实际上有一个父级,它们位于 DOM 中并且只是在脚本中引用。如果您想将它们放置在同一个位置,您可以position: absolute
像已经完成的那样使用,但还需要指定top: 0
并将left: 0
它们移动到正确的位置。
请注意,这position: absolute
会将元素定位在其最接近的未position: static
设置默认属性的父级中。要将它们锚定在同一个位置,您可以将它们的共同父级更改.grid-container
为其他内容,例如position: relative
. 这将导致所有子元素与position: absolute; top: 0; left: 0;
网格容器的左上角对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid-container {
margin: auto;
max-height: 600px;
max-width: 1400px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
position: relative;
}
.little-finger-klein {
height: 300px;
width: 700px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/little-finger-klein.png') no-repeat;
}
.little-finger-gross {
position: absolute;
left: 0;
top: 0;
height: 600px;
width: 1400px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/little-finger-ganz.png') no-repeat;
}
.justate-klein {
height: 300px;
width: 700px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/just-ate-klein.png') no-repeat;
}
.justate-gross {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
top: 0;
height: 600px;
width: 1400px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/just-ate-ganz.png') no-repeat;
}
.socket-klein {
height: 300px;
width: 700px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/socket-klein.png') no-repeat;
}
.socket-gross {
position: absolute;
left: 0;
top: 0;
height: 600px;
width: 1400px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/socket-ganz.png') no-repeat;
}
.pitschi-klein {
height: 300px;
width: 700px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/pitschi-klein.png') no-repeat;
}
.pitschi-gross {
position: absolute;
left: 0;
top: 0;
height: 600px;
width: 1400px;
background: url('https://un-aesthetic.com/wp-content/uploads/2020/11/pitschi-ganz.png') no-repeat;
}
</style>
<title>Gallery</title>
</head>
<body>
<div class="grid-container">
<div class="column">
<div id="littlefingerklein" class="little-finger-klein"></div>
<div id="socketklein" class="socket-klein"></div>
</div>
<div class="column">
<div id="justateklein" class="justate-klein"></div>
<div id="pitschiklein" class="pitschi-klein"></div>
</div>
</div>
<script>
var light = document.getElementById('littlefingerklein');
light.addEventListener('click', function(light){
light.target.classList.toggle('little-finger-gross');
})
var light2 = document.getElementById('justateklein');
light2.addEventListener('click', function(light2){
light2.target.classList.toggle('justate-gross');
})
var light3 = document.getElementById('socketklein');
light3.addEventListener('click', function(light3){
light3.target.classList.toggle('socket-gross');
})
var light4 = document.getElementById('pitschiklein');
light4.addEventListener('click', function(light4){
light4.target.classList.toggle('pitschi-gross');
})
</script>
</body>
</html>
推荐阅读
- css - CSS Scale 动画从右上角浮动
- javascript - 我在通过 nodejs 和 slideshowjs 打开 PowerPoint 演示文稿时遇到问题
- macos - macOS 上 PF_ROUTE 中的错误?
- reactjs - 在 react typescript tsx 文件中声明数组会给出“错误 TS1109:预期表达式”
- r - 如何将图形限制为仅显示正 x 轴上方的点?
- typescript - 可以用@mojotech/json-type-validation 表示固定长度的数组/“元组”吗?
- firebase-realtime-database - 如何在 Dart 中使用 await 而不是 .then()
- random - 我可以有效地从 HashSet 中随机抽样吗?
- laravel - 如何在 laravel v5.7 中使用 laravel 集体包 v5.4
- python - 代码执行时出现 Py4JJavaError 的 Apache Spark 问题