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

问题描述

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

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

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

center html image-gallery

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

问题描述

解决方法

相关问答