I have a question about HTml responsive image

It's hard to know what kind of moves they're doing. Wouldn't it grow at the same rate if you put the image to grow together in a single parent element and grow the parent element?

When you increase or modify the size of an element in the CSS... To set criteria Find out the transform-origin properties.

This is possible by adjusting the height value instead of modifying the width value of the image tag. This is because the image tag is sized accordingly because the width value or height value is auto by default.

https://jsfiddle.net/w558gxvu/

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

.fadeIn {
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}

#animate-img {
  display:none;
  z-index:2;
}

#animate-img2 {
  z-index:2;
  height: 46px;
}

.hide{display:none;}
.show{display:inline;}

/* Since the two images have the same height in common, you can resize them in the same proportion by adjusting the height of the two images.*/
img {
  height: 92px !important;
}