Flexbox项目：图像周围的边框有很多空白，而不是图像周围的空白

Question

编辑：上传到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

您应该将 formatter: function() { var series = this.series.chart.series; if (this.series._i == 0) return '<span style="color: white; font-weight: bold;">' + series[1].data[this.x].y + '</span><br/>' return '<span style="color: white; font-weight: bold;">' + this.y + '</span><br/>' } 更改为flex: 1 1 0;
或删除flex: 0 auto;

请参阅codepen：https://codepen.io/Minegolfer/pen/xxxRNjo

Answer 2

您可以申请

img{
    object-fit: cover;
}

object-fit：封面；将剪切图像的侧面，保留长宽比，并填充空间

Answer 3

将width中的height和px赋予您的#myImages。