使图像彼此靠近

Question

我目前有此代码

div {
  background-color: indigo;
}

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

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

.shirt-container {
  position: relative;
}

<div class="all-shirts-wrapper">
  <div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
  <div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
  <div class="shirt-container"><img src="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 img {
    height: 225px;
    position: relative;
    z-index: 3;
}

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

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

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

由于特定原因，我无法裁剪图像

这是小提琴：https://jsfiddle.net/bhz3kLfj/

Answer 1

使用图像作为背景。

div {
  background-color: indigo;
}

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

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

.shirt-container {
  width: 150px;
  height: 200px;
  position: relative;
  background-size: 200px auto;
  background-repeat: no-repeat;
  background-position: center;
}

<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>

Answer 2

您可以使用object-fit: cover以所需的宽度从左右方向裁剪图像（图像的宽度为225px，所以让我们将其设置为170px的宽度可以消除左右的大部分空白）

请参见Fiddle

Answer 3

这是我的解决方法：

div {
  background-color: indigo;
}

.shirt-container img {
    height: 225px;
    position: absolute;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
}

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

.shirt-container {
    width: 160px;
    height: 225px;
    position: relative;
    overflow: hidden;
}

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

Answer 4

您可以尝试将图像作为背景添加到每个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;
}

https://jsfiddle.net/uxwnkets/