CSS网格不会崩溃单元格以响应img转换

Question

我有一个css grid有两个单元格，拿着一些文字和图像。使用媒体查询根据屏幕宽度重新定位单元格。

如果max-width = 500px为true，则图像放在文本的顶部。否则，图像将放置在文本的右侧。我还在媒体查询中使用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

转换不会影响布局。它们发生在另一层。这与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>

Answer 2

而不是将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>