代码之家 › 专栏 › 技术社区 › Julio Feferman Mohamed Mostafa Goda

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

css-grid css

Julio Feferman Mohamed Mostafa Goda · 技术社区 · 6 年前

我有一个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>

2 回复 | 直到 6 年前

coreyward 6 年前

变换不会影响布局。它们发生在另一层。这与CSS网格无关。

您可以更简单地观察这一点:

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

Obsidian Age 6 年前

而不是添加 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>