Сетка CSS не разрушает ячейку в ответ на преобразование img

Question

У меня есть css grid с двумя ячейками, содержащим текст и изображение. Ячейки перемещаются в зависимости от ширины экрана с помощью медиазапроса.

Если max-width = 500px истинно, изображение помещается поверх текста. В противном случае изображение размещается справа от текста. Я также масштабирую изображение с transform: scale(0.5) в медиа-запросе.

Все это прекрасно работает, за исключением того, что при масштабировании изображения ячейка сетки, в которой оно находится, остается в исходном размере изображения. Другими словами, ячейка не сжимается до масштабированного размера изображения.

Если вместо использования transform изменить размеры изображения, используя относительные width и height, ячейка сетки разрушится. Тем не менее, эти размеры будут относительно контейнера изображения, и это не то, что я хочу.

Возможно, transform: scale() не вызывает перерисовку сетки. Сценарий ниже иллюстрирует проблему. Любая помощь очень ценится.

.adaptive-grid {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    justify-items: center;    
    align-items: center;
    text-align: center;
    grid-auto-columns: min-content;
}

.adaptive-grid > div {
  border: 1px solid black;
}

.adaptive-grid .left {
	grid-column: 1;
}

.adaptive-grid .right {
    grid-column: 2;
}

@media only screen and (max-width: 500px) {
	.adaptive-grid {
	    grid-template-rows: auto auto;
	    grid-template-columns: auto;
	}
	
	.adaptive-grid .first {
	    grid-row: 1;
	    grid-column: 1;
	}
	
	.adaptive-grid .second {
	    grid-row: 2;
	    grid-column: 1;
    }
}

@media only screen and (max-width: 500px) {
    .img_50 {
      transform: scale(0.5);
      /*width: 20%;
      height: 20%;*/
    }
}

<div class="adaptive-grid">
  <div class="left second">
    <p>
    some html
    </p>
  </div>
  <div class="right first">
    <img class="img_50" src="https://via.placeholder.com/350x150" />
  </div>
</div>

Answer 1

Вместо добавления transform к самому изображению, почему бы не добавить его в контейнер?

.right.first {
  transform: scale(0.5);
}

Это приводит к уменьшению контейнера, а также к уменьшению контейнера, а также к изображению в пределах:

.adaptive-grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
  text-align: center;
  grid-auto-columns: min-content;
}

.adaptive-grid>div {
  border: 1px solid black;
}

.adaptive-grid .left {
  grid-column: 1;
}

.adaptive-grid .right {
  grid-column: 2;
}

@media only screen and (max-width: 500px) {
  .adaptive-grid {
    grid-template-rows: auto auto;
    grid-template-columns: auto;
  }
  .adaptive-grid .first {
    grid-row: 1;
    grid-column: 1;
  }
  .adaptive-grid .second {
    grid-row: 2;
    grid-column: 1;
  }
}

@media only screen and (max-width: 500px) {
  .right.first {
    transform: scale(0.5);
  }
}

<div class="adaptive-grid">
  <div class="left second">
    <p>
      some html
    </p>
  </div>
  <div class="right first">
    <img class="img_50" src="https://via.placeholder.com/350x150" />
  </div>
</div>

Answer 2

Преобразования не влияют на макет. Они происходят в другом слое. Это не имеет ничего общего с CSS Grid.

Вы можете наблюдать это проще:

.container {
  padding: 20px;
  border: 1px solid #000;
  min-height: 40px;
}

.element {
  background: #ddd;
  transform: translateY(50px)
}

.no-transform {
  background: #ddd;
}

<div class="container">
  <div class="element">
    Hello
  </div>
</div>
<div class="container">
  <div class="no-transform">
    Hello
  </div>
</div>