去除图像之间不必要的间隙

Question

问题：

我正在尝试在3 x 3的网格中显示9个图像（大小不同），每个图像彼此整齐地显示。就像在此[[example。 HTML应该保持不变。

我不知道如何解决图像之间的不均匀间隙显示。我的[[Current output

我尝试过的事情：

我的尝试有3行，其中每一行都包含在<div>标记内。在每一行中，显示三张图像。

在下面的代码中，我包含了用于显示在第一行中显示第一张图像的代码。

我将每个图像包装在HTML <label>标记中，并使用Bootstrap和CSS设置图像样式。我的尝试可以在jsfiddle上找到：https://jsfiddle.net/dom_sniezka/78dy3to2/

我是一个初学者，我整天都在尝试解决此问题，但是我真的不明白自己在做什么错，任何帮助将不胜感激。

---

html（对于第1行中的图像1 ...其余代码可在JSFiddle链接中找到）

<div class="container-fluid my-container">
    <form action="addition" method="post">
        <!--First Row, First Image-->
        <div class="row no-pad display-flex">
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col- my-col my-col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 my-col">
                <label for="">
                    <img class="img-thumbnail" src="https://image.shutterstock.com/image-photo/red-apple-on-white-background-260nw-158989157.jpg">
                    <input type="radio" id="" name="checked-radio" value="normal">
                </label>
            </div>
        </div>
    </form>
</div>

css

/* HIDE RADIO */
[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  padding: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}


.my-container{
    /*border: 1px solid green;*/
    padding: 0px;
    margin: 0px;
}

.img-thumbnail{
    height: 100%;
    width: 100%;
}

/*Removes gutter in between columns*/
.row.no-pad {
  margin-right:0;
  margin-left:0;
}
.row.no-pad > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

问题：我试图在3 x 3的网格中显示9个图像（大小不同），每个图像彼此整齐地显示。像这个例子HTML应该保持不变。我不...

Answer 1

.img-thumbnail{
    height: 200px;
    width: 100%;
    object-fit: cover;
}

Answer 2