网格项目的宽高比

之前,我们讲了宽高比盒子,谈到一个技巧,就是运用填充来随心所欲地调整一个元素的长宽比例。这个技巧并不是经常能用到的,因为修整一个元素的高度是自找麻烦,但也不是没有这种情况出现。

要降低这一风险,有一种方法,那就是伪元素(Psuedo Element)策略,让伪元素顶住其上一层元素,撑起纵横比。但是如果元素里的内容将元素顶得更高,那元素也会变得更高,纵横比就完蛋了。

这一技巧可以在CSS网格布局中,应用到网格项目上去!当然,应用的方法有几种,都值得我们思考。

记住,网格区域和占据区域的元素并不一定大小一致

这一点我们刚讲过。 那篇文章一开始是想写成这篇文章的一部分的,不过后来感觉这个概念还是挺重要的,应该分开写。

知道了这一点,就引申出两个问题:是需要网格区域本身有个纵横比,然后里面的元素跟着拉伸?还是不管元素所在的网格区域如何,仅元素需要纵横比?

只是内部的元素需要设纵横比。

好,这个可能比较容易一些。 只要保证元素的宽度和网格区域的宽度100%相同,然后加上伪元素来处理拉伸高度的纵横比。

<div class="grid">
    <div style="--aspect-ratio: 2/1;">2/1</div>
    <div style="--aspect-ratio: 3/1;">3/1</div>
    <div style="--aspect-ratio: 1/1;">1/1</div>
</div>

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    place-items: start;
}
.grid > * {
    background: orange;
    width
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/aspect-ratios-for-grid-items.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部