Удалить нежелательные промежутки между изображениями

Question

Проблема:

Я пытаюсь отобразить 9 изображений (различающихся по размеру) в сетке 3 x 3, где каждое изображение отображается аккуратно рядом друг с другом. как в этом примере . HTML должно остаться без изменений.

Я не понимаю, как исправить неравные промежутки между отображаемыми изображениями. Мой Текущий вывод

Что я пробовал:

Моя попытка имеет 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;
}

Answer 1

Попробуйте это css:

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

Answer 2

Попробуйте это:

.row.no-pad > [class*='col-'] {
  padding-right:0;
  padding-left:0;
  white-space: nowrap;
  display:grid;
}