Bilder zuschneiden und verschieben. Gitterstruktur

Question

Ich arbeite daran, das Bild in die richtige Position zu bringen und es oben und unten zuzuschneiden. So sollte es aussehen (Heldenteil): https://www.behance.net/gallery/161732057/CozyMornings-online-store

Das gesamte Projekt ist auf einem Raster aufgebaut.

Ich benötige ein nach links verschobenes kreisförmiges Bild, das größer als der Container ist und oben und unten beschnitten ist. Darüber hinaus sollte es responsiv sein.

Ich versuche, ein Bild in ein Paket zu packen. Geben Sie diesem Wrapper eine relative Position und verbergen Sie den Überlauf. Das funktioniert nicht.

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

Danke für deine Hilfe!

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