logo size seems to shrink in html and css

Question

I have a list of images as shown in fiddle in which I have aligned images in a straight line.

In the fiddle, the last logo (as shown in the screenshot below marked by a red circle) seems to resize and I am not sure what are the reasons behind that.

The CSS codes which I have used in order to align the images in a straight line are:

.images {
  display: flex;
  justify-content: space-between;
  align-items:center;
  background-color: #eee;
  padding: 1rem;
  flex-wrap: wrap;
}

.images img {
  width: auto;
  height: 2.5rem;
}

Problem Statement:

I am wondering what changes I should make in the CSS codes so that the last logo (emma marketing logo) should have the same size as other logos. At this moment, the size of every image is set to auto and height to 2.5rem

On inspect, the logo seems to resize as shown below marked by the red arrows.

Answer 1

You need to crop the last picture, as you can see there's a large transparent area around it.