如何在css3中结束一列图像

Question

I have the following code HTML

<div id="images" class="img"/>
 <img src="spiderman.png" alt=""/>
 <img src="superman.png" alt="" height="25%" width="25%"/>
 <img src="batman.png" alt="" />
</div>

css

.img {
  position: absolute;  
  right: 15%; 
  top: 30%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

.img2 {
box-shadow: 0px 0px 5px #fff;
  position: absolute;  
  right: 15%; 
  top: 30%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

JavaScript

(function() {

   function keyDown(event) {
     if (event.keyCode == 65) {
       if (document.getElementsByClassName("img").length > 0) {
         document.getElementsByClassName("img")[0].className = "img2"
       } else {
         document.getElementsByClassName("img2")[0].className = "img"
       }
     }
   }

   document.addEventListener('keydown', keyDown);
 })();

which outputs

This code aligns three images in a column and when i press the key 'a' it highlights those, the only problem i am having is the column doesn't seem to end and i do not know how to solve this.

Answer 1

the images div:

<div id="images" class="img"/>

is ending when it shouldn't. remove the slash and give it a run

<div id="images" class="img">
    <img src="spiderman.png" alt=""/>
    <img src="superman.png" alt="" height="25%" width="25%"/>
    <img src="batman.png" alt="" />
</div>

The issue seems to be with the superman.png image. It is using the original height and width of the image. So it shrinks the image for the display but still thinks it is large when measuring, hence the larger open space in the column.