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

时间:2018-08-29 22:07:01

标签: css css-grid

我有一个带有两个单元格的css grid,其中包含一些文本和图像。使用媒体查询,根据屏幕宽度重新定位单元格。

如果max-width = 500px为true,则图像放置在文本顶部。否则,图像将放置在文本的右侧。我还在媒体查询中使用transform: scale(0.5)缩放图像。

所有这些工作正常,除了在缩放图像时,包含图像的网格单元将保持图像的原始尺寸。换句话说,单元格不会折叠到图像的缩放大小。

如果我不是使用transform而是使用相对的widthheight来修改图像尺寸,则网格单元会崩溃。但是,这些尺寸将相对于图像容器,而这不是我想要的。

也许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 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

与其将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>