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

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

Overflow hidden 应该用在主容器，hero-section 上。

.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;
}