默认显示3张图片，中间显示全部两边显示部分 ，且图片不重叠

如果你想要三张图片默认显示，中间显示全部，两边显示部分，且不重叠，可以使用 CSS 的 flex 布局和 margin 属性来实现。具体步骤如下：

1. 创建一个容器，将三张图片放到容器中，并使用 flex 布局使它们水平居中对齐。
2. 给左右两张图片设置 margin-right 和 margin-left 属性，使它们与中间的图片产生间距。
3. 使用 object-fit 属性来控制图片的填充方式，使图片等比例缩放，并完全显示在容器中。
4. 如果需要对图片进行层级控制，可以使用 z-index 属性，数值越大的图片会显示在上层。

下面是一个示例代码：

<div class="container">
  <img src="image1.jpg" class="img">
  <img src="image2.jpg" class="img">
  <img src="image3.jpg" class="img">
</div>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    margin: 0 10px;
  }
  .img:first-child {
    margin-right: 100px;
    z-index: -1;
  }
  .img:last-child {
    margin-left: 100px;
    z-index: -1;
  }
</style>

在上面的示例中，图片被设置为等宽等高的正方形，使用 object-fit 属性填充容器，并通过 margin 属性控制左右两张图片的间距。使用 z-index 属性将左右两张图片的层级设置为-1，使它们在中间图片的下层。