Элемент Flexbox: граница вокруг изображения имеет много пустого пространства, а не вокруг изображения

Question

EDIT: загружено в jsfiddle: https://jsfiddle.net/evanF/bdon7ytg/6/

Внутри моего контейнера flexbox у меня есть несколько изображений. Мне нужна рамка, которая проходит точно вокруг изображения, но вместо этого, прямо сейчас, слева и справа от изображения есть свободное место.

Не уверен, почему?

Видно здесь: https://imgur.com/i29JrOQ

Обратите внимание, что фиолетовая рамка имеет дополнительное пространство внутри слева и справа от изображения.

* Обратите внимание, синий материал - это фоновое изображение в

Неконечно, что делать здесь.

HTML

<div class="flex-container">

        <div id="myImages">

              <img id="one" src="images/img1.jpg">


            <img id="two" src="images/img2.jpg">


            <img id="three" src="images/img3.jpg">


        </div>

</div>

Код CSS:

body, html
{
    display: flex;
    height: 100vh;
    min-height: 100vh;
    flex-direction: column;
    background-image: url("img12.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    /*overflow: hidden;*/

    margin: 0;
    padding: 0;



}


img {

    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 5px;

    max-height: 75%;
    max-width: 75%;

    object-fit: contain;
    flex: 1 1 0;
    min-width: 20%;
    min-height: 20%;

}

.flex-container {

    display: flex;
    height: auto;
    min-height: 25vh;

}

#myImages {

    display: flex;
    height: auto;
    flex: 5;
    justify-content: center;
    align-items: center;

}

#one {
       border: 2px solid purple;

}

````````````````````````````

Answer 1

Вы должны либо изменить flex: 1 1 0; на flex: 0 auto;
, либо удалить flex: 1 1 0;

См. Кодовое примечание: https://codepen.io/Minegolfer/pen/xxxRNjo

Answer 2

Можно применить,

img{
    object-fit: cover;
}

Подгонка объекта: обложка;будет обрезать края изображения, сохраняя пропорции, а также заполняя пространство

Answer 3

Дайте width и height в px вашему #myImages.