裁剪和移动图像。网格布局

Question

我正在努力将图像放在正确的位置并将其裁剪在顶部和底部。 这就是它应该看起来的样子（英雄部分）： https://www.behance.net/gallery/161732057/CozyMornings-online-store

整个项目是在网格上构建的。

我需要一个向左移动的圆形图像，大于容器并在顶部和底部进行裁剪。此外，它应该具有响应能力。

我试图将图像放入包装中。给这个包装器相对位置并隐藏溢出。这不起作用。

.hero-image-wrapper {
  border: 0.3rem solid #968273;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  height: 150%;
  position: relative;
  overflow: hidden;
  top: -25%;
  left: -10%;
}

.hero-image {
  transform: scaleX(-1);
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

<div class="hero-image-wrapper">
  <img class="hero-image" src="../images/pexels-ekaterina-bolovtsova-6976906-mobile.jpg">
</div>

感谢您的帮助！

Answer 1

应在主容器、英雄部分上使用隐藏溢出。

.hero-section {
    grid-column: 1/13;
    grid-row: 2/3;
    display: flex;
    padding: 0% 10% 0% 0%;
    justify-content: space-between;
    gap: 0.5rem;
    overflow: hidden;
}