Почему transform: translateY (-10rem) не перемещает дочерний элемент изображения, который находится внутри его родительского элемента?

Question

Файлы таковы: div.current-houses> figure.item.item--1> img.img.img--2. Итак, я пытаюсь расположить изображение внутри родительского элемента рисунка так, чтобы оно было отцентрировано. Я использовал tranform: translateY (-10rem); попытаться поднять это, но это не работает. Он просто поднимает изображение целиком и разрезает себя, в отличие от подъема нижней части изображения, которая выходит за границы, но не видна; как будто он никогда не рендерит часть изображения вне границ

.current-houses {
  height: 600px;
  width: 600px;
  background-color: grey;
  
  display: grid;

  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(11, 5vw);
}

.current-houses__item--2 {
  grid-row: 4 / 8;
  grid-column: 3 / -1;
/*The part in yellow is item    */
  background-color:yellow;
}

.current-houses__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.current-houses__img--2 {
/* Just trying to move image down; however, it is not working.    */
  transform: translateY(1rem);
}

/* FIRST IMAGE JUST TO HELP WITH CONTEXT  */
.current-houses__item--1 {
            grid-row: 1 / 4;
            grid-column: 6 / 9;
}

.current-houses__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

<div class="current-houses">
  
  <figure class="current-houses__item current-houses__item--1">
    <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="" class="current-houses__img current-houses__img--1">
  </figure>
  
  <figure class="current-houses__item current-houses__item--2">
    <img src="https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="" class="current-houses__img current-houses__img--2">
  </figure>
</div>

Answer 1

Итак, ваша первая проблема в том, что ширина и высота изображения, о котором идет речь, установлены на 100%. Это обрезает это изображение до 100% высоты родителя и до 100% ширины родителя во время рендеринга. Поэтому, когда вы пытаетесь переместить его, вы перемещаете уже установленное изображение (ie нет хвостового бита, которому нужно следовать).

В приведенном ниже фрагменте кода я изменил высоту на автоматическую, оставил ширину равной 100% и убедился, что для класса элементов установлено переполнение: скрыто. Я также увеличил изображение и переместил его, чтобы продемонстрировать, что исходной проблемы больше нет.

Cheers,

.current-houses {
  height: 600px;
  width: 600px;
  background-color: grey;
  
  display: grid;
  
  gap: .5rem;

  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(11, 2rem);
}

.current-houses__item--2 {
  grid-row: 4 / -1;
  grid-column: 3 / -1;
/*The part in yellow is item    */
  background-color:yellow;
  
  /* Add in this line so excess image does not surpass boundaries */
  overflow: hidden;
}

.current-houses__img {
        width: 100%;
          /* Change Heighto to auto */
        height: auto;
        object-fit: cover;
        display: block;
}

.current-houses__img--2 {
/* Just trying to move image down; however, it is not working.    */
  transform: scale(1.5) translateY(1rem);
}

/* FIRST IMAGE JUST TO HELP WITH CONTEXT  */
.current-houses__item--1 {
            grid-row: 1 / 4;
            grid-column: 6 / 9;
}

<div class="current-houses">
  
  <figure class="current-houses__item current-houses__item--1">
    <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="" class="current-houses__img current-houses__img--1">
  </figure>
  
  <figure class="current-houses__item current-houses__item--2">
    <img src="https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="" class="current-houses__img current-houses__img--2">
  </figure>
</div>