CSS 偏心图片定位

Question

我需要将手机居中 phone。以下是模型中包含的内容：

但是，这就是我得到的：

如何 position/center 移动图像以使阴影不会将 phone 推向右侧？我正在使用 display: flex;

HTML

<div class="image">
        <img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/landing-page/mobile-image-1.jpg" alt="">
        <img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/landing-page/mobile-image-2.jpg" alt="">
        <div class="middle-image">
             <img class="middle-image-mobile" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/landing-page/mobile-image.png" alt="">
        </div>
        <img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/landing-page/mobile-image-3.jpg" alt="">
        <img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/landing-page/mobile-image-4.jpg" alt="">
</div>

CSS

& .image {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;


        & > img {
            border-radius: var(--theme-border-radius);
            flex-grow: 1;
            height: 100%;
            width: 13%;
        }
}

Answer 1

请看一下。我试图创造类似的东西。这是假设您已将白色 space 添加到图片中，以便图像和阴影看起来居中。

.wrapper {
 display: flex;
 justify-content: space-around;
 border: 5px solid gray;
 width: 650px;
 height: 300px;
 margin: auto;
}
.blocks {
 position: relative;
 width: 13%;
 height: 100px;
 background-color: #d5d5d5;
 margin: 10px;
}
.blocks:not(:nth-child(3)) {
  border-radius: 10px;
  box-shadow: 0 3px 12px -6px black;
  border: 5px solid white;
}
.blocks:nth-child(2), .blocks:nth-child(4) {
 top: 100px;
}
.blocks:nth-child(1), .blocks:nth-child(5) {
 height: 150px;
}
.center {
 position: relative;
 z-index: -1;
 top: 10px;
 display: block;
 margin-left: -30px;
 margin-right: -30px;
 width: 150px;
 height: 250px;
 border-right: 30px solid #9696d8;
 border-left: 30px solid #9696d8;
}

<div class="wrapper">
  <div class="blocks"></div>
  <div class="blocks"></div>
  <div class="blocks center"></div>
  <div class="blocks"></div>
  <div class="blocks"></div>
</div>

您可以看到我使用负边距使元素更靠近位于中心的元素。如果你想处理叠加图像，那么你可以根据需要在前面添加 z-index。

希望对您有所帮助。

CSS 偏心图片定位

CSS positioning of off-center image

css

sass

flexbox

object-fit