<分区>
<分区>
我想知道是否有可能有一个 squared css grid-item 过度拉伸(stretch)(例如)从 grid-column 1 到 grid-column 5。 我怎样才能用这个网格项元素制作一个正方形？
HTML 应该是这样的:
<div class="wrap">
<div class="squared">
This blue element should be a square.<br/>
Same height as width.
</div>
</div>
和 CSS:
.wrap{
max-width: 1100px;
margin: 0 auto;
position: relative;
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
}
.squared{
background-color: blue;
grid-column-start: 2;
grid-column-end: 5;
}
我准备了一个JSFiddle:https://jsfiddle.net/b8utkf21/
最佳答案
您可以使用 jquery 来实现这一点。例如
var cw = $('.squared').width();
$('.wrap').css({'height':cw+'px'});
关于css - 如何对 CSS grid-item 元素进行平方？如何设置与宽度相同的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59666890/