Html 使图像更接近彼此

我现在有这个代码

div{
背景色：靛蓝；
}
.衬衫容器img{
身高：225px；
位置：相对位置；
z指数：3；
}
.所有衬衫的包装{
显示器：flex；
/*宽度：41px*/
}
.衬衫盒{
位置：相对位置；
}

---

像这样使用图像作为背景

div{
背景色：靛蓝；
}
.衬衫容器img{
身高：225px；
位置：相对位置；
z指数：3；
}
.所有衬衫的包装{
显示器：flex；
/*宽度：41px*/
}
.衬衫盒{
宽度：150px；
高度：200px；
位置：相对位置；
背景尺寸：200px自动；
背景重复：无重复；
背景位置：中心；
}

---

您可以使用

对象拟合：覆盖

从左侧和右侧裁剪所需宽度的图像（图像的宽度为225px，因此让我们将其设置为170px的宽度，以删除左侧和右侧的大部分空白）

---

请参见

您可以尝试将图像作为背景添加到每个div。这样可以消除每个图像左右两侧的空白

<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png)"></div>
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png)"></div>
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png)"></div>
</div>

div {
  background-color: indigo;
}
.shirt-container {background-size:contain; background-repeat: no-repeat;}

.shirt-container img {
    height: 225px;
    position: relative;
    z-index: 3;
}

.all-shirts-wrapper {
    display: flex;
    /* width: 41px; */
    height: 200px;
}

.shirt-container {
    width: 140px;
    position: relative;
}

div{
背景色：靛蓝；
}
.shirt容器{背景大小：包含；背景重复：无重复；}
.衬衫容器img{
身高：225px；
位置：相对位置；
z指数：3；
}
.所有衬衫的包装{
显示器：flex；
/*宽度：41px*/
高度：200px；
}
.衬衫盒{
宽度：140px；
位置：相对位置；
}

以下是我的解决方案：

div{
背景色：靛蓝；
}
.衬衫容器img{
身高：225px；
位置：绝对位置；
z指数：3；
左：50%；
转化：translateX（-50%）；
}
.所有衬衫的包装{
显示器：flex；
/*宽度：41px*/
}
.衬衫盒{
宽度：160px；
身高：225px；
位置：相对位置；
溢出：隐藏；
}

---

是，这是另一个选项，请确保在使用前检查浏览器支持