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