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>

CSS网格不会折叠单元格以响应img转换

2 个答案: