如何对齐脚本中没有父项的图像？

Question

我想创建一个图片库，其中的部分图片被隐藏起来，并在点击时显示出来。我的主要问题是，单击裁剪图像后如何使显示的图像居中？这些图片可能有助于理解我的问题。

https://i.stack.imgur.com/9QX7d.png
https://i.stack.imgur.com/uf6AG.png

到目前为止，这是我的代码：

<!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>

Answer 1

这些图像实际上有一个父级，它们在 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>

如何对齐脚本中没有父项的图像？

How can I align an image that is within a script and has no parent?

html

css

center

image-gallery