bootstrap栅格系统的div高度怎样定？

冼晨晖 · 发表于 2022-10-6 12:17:35

请问用bootstrap栅格系统写div时，高度应该怎样写呢？不能直接写px吧，不同设置分辨不同，div宽度始终是满屏的，如果高度指定像素大小，div就不能保证长宽比例恰当了。本人菜鸟，基础还很渣，望各位大神指教。

凉凉三世慌如梦 · 发表于 2022-10-6 12:35:55

从
@Luin

神那学来的。
height:0px;
padding-bottom:100%

wheroin · 发表于 2022-10-6 12:54:15

这真是一个奇怪的需求。
要让元素按完全比例缩放，想想就复杂。
高度可以根据与宽度的比例，来用js控制，那么padding、margin、font-size如何也按比例缩放呢？
一般来说，高度都是用元素内容以及padding来撑开的，所以不太需要指定高度。

掠影恶魔猎手 · 发表于 2022-10-6 13:12:35

尽量不限制高度，如果需要保证宽高比，
@huiter

的答案是可以实现的。

baichuan101 · 发表于 2022-10-6 13:30:55

自己刚好也碰到这个需求了，做响应式布局的时候，当图片完全加载之前想把高度给固定。百思不得其解，都打算让js出马了。
后来看了下手淘的布局
img外层的a标签的样式
padding: 50% 0;
height: 0;
完美的撑起一个固定的高度。
和楼上有人回答的padding-bottom:100%;原理一样;

a3316909 · 发表于 2022-10-6 13:49:15

呵呵，今天学习，刚好遇到这个问题。
我需要做的是一列中的是一个绿色背景(绿色背景中心有文字)，另一侧用的是一张400*400px大小的图片。
随着屏幕缩放，图片变大（或变小）但是背景不会变（一开始写死了高度）
-------------------------------
为了解决这个问题，目前我找到一个比较low的办法。切图1px*1px 绿色gif小图片。<img width="100%" />就可以搞定这个问题。因为我绿色背景里面要加文字，所以我外部又套了一个div，然后加文字就搞定了。