'Transparent background of the images are too big

I'm trying to position three images with flexbox inside a container, but the images have a transparent background, that somehow interfere with each other.

Here is the html:

<div className="buttonContainerLeft">
<img className="images" src={player1Dis}></img>
<img className="images" src={player2Dis}></img>
<img className="images" src={player3Dis}></img>
</div>

The css:

.buttonContainerLeft {
    border-color: red;
    border-style: solid;
    position: absolute;
    z-index: 1;
    width: 25%;
    height: 22%;
    left: 5%;
    top: 38%;
    display: flex;
    flex-direction: row;
    object-fit: contain;
    }
.images {
    margin-right: -15px;
}

Here is the visual example, without the .images class applied, with it works fine: enter image description here

What I want is to know if there is a better solution to this problem?

htmlcssreactjs


Solution 1:[1]

The best solution is using a div container for each image then specify the width for this container and use overflow hidden to remove the transparent background.

<div className="buttonContainerLeft">
  <div className="image-container">
    <img className="images" src={player1Dis} />
  </div>
  <div className="image-container">
    <img className="images" src={player2Dis} />
  </div>
  <div className="image-container">
    <img className="images" src={player3Dis} />
  </div>
</div>

Styles :

.image-container{
    display: flex;
    align-items: center;
    width: 200px; //This can be changed depend on how much of the image you want to be shown
    overflow: hidden;
    justify-content: center;
}

Solution 2:[2]

To fit all the 3 images into the container, just add to the images width: 100%.

Here is a working demo.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ossama Ismaili
Solution 2 Martin Lévai

Related Questions