HTML中保持DIV宽高比

HTML中保持DIV宽高比,第1张

以 4:3 为例, 想要DIV按照这个宽高比,在网页中随着横向的伸缩,在纵向上等比伸缩, 用一个外围DIV来包裹它,且将这个外围DIV称之为Wrapper, Wrapper 的CSS样式如下:

这个Wrapper的宽高比就是 4:3 , 其中的奥妙就在于 padding-bottom:75% , padding-bottom 是相对宽度的.也就是整个Wrapper的高度等于 padding-bottom 的高度,Wrapper 没有内容高度.没有内容高度如何往其中放置我们准备的DIV呢?答案是 绝对定位 , 所以Wrapper的样式中有 position:relative , 方便子元素相对Wrapper的左顶点定位.

最后我们把想要保持宽高比的DIV放到Wrapper中去, 这个DIV且称之为Inner, 下面是这个Inner的CSS样式:

结束.

div的100%是从其上一级div的宽高继承来的,有一点很关键,就是要设置div100%显示,必须设置其上一级div的宽度或高度,否则无效。举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的宽高都为100%的话,那cc的确切大小就是父div的大小(宽300高200),在尝试中你会发现,div显示会受自身和其上一级div的padding和margin影响,而其实际宽高不受影响。

html 中的标签元素 可以用样式来控制,比如你说的div

大小 也就是宽高,宽 width  高 height

位置 可以 margin 外边距

或者用 position 定位来

有兴趣可以学习一下 CSS2  或者很强的 CSS3


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6143506.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存