裁剪和移動影像。網格佈局

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