Pangkas dan alihkan imej. susun atur grid

Question

Saya sedang berusaha untuk mendapatkan imej pada kedudukan yang betul dan memangkasnya di bahagian atas dan bawah. Inilah yang sepatutnya kelihatan (bahagian wira): https://www.behance.net/gallery/161732057/CozyMornings-online-store

Keseluruhan projek dibina di atas grid.

Saya memerlukan imej bulat dialihkan ke kiri, lebih besar daripada bekas dan dipotong di bahagian atas dan bawah. Di samping itu, ia harus responsif.

Saya cuba memasukkan imej ke dalam pakej. Berikan pembungkus ini kedudukan relatif dan sembunyikan limpahan. Ini tidak berfungsi.

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

Terima kasih atas bantuan anda!

Answer 1

Limpahan sembunyi hendaklah digunakan pada bekas utama, bahagian wira.

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