CSS中高度根据宽度自适应的方法

html-css054

CSS中高度根据宽度自适应的方法,第1张

由于margin, padding 的百分比数值是相对父元素的宽度计算的，只需将元素垂直方向的一个padding值设定为与width的一定比例就可以了。比如正方形：

未完待续

很简单，利用table的自适应的属性即可。最外层定义一个dispaly:table就好，如果要宽度到左右两边，高度自适应的话，可以这样设置，代码如下：

.ctn {width:100%display:table}

以我多年的经验判断，你想要的效果，应该是吧center_bg放置在网页正中。

所以做了下面的代码：

其中，XXX是你图片youce.jpg的宽度，YYY是youce.jpg的高度，

还有，（XXX/2）（YYY/2）这两个数字也是需要你四舍五入计算的

---->CSS代码更改：

.center_bg{position:absolutetop:50%left:50%margin-left:-(XXX/2)pxmargin-top:-(YYY/2)pxwidth:XXXpxheight:YYYpxbackground-image:url(../imge/youce.jpg)background-repeat:no-repeat}

body{width:100%height:100%background-position:centerbackground-image:url(../imge/hy_03.gif)}

---->HTML代码更改：

<div class="center_top">

<div class="zts"><strong>当前位置》</strong></div>

<div class="zt"><strong>登录首页</strong></div>

</div>

<div class="center_bg"></div>