在CSS中,要使元素的高度等于宽度,你可以采用以下几种方法: 方法一:使用padding-top或padding-bottom属性 这种方法利用了padding属性百分比值的特性,即padding的百分比是相对于包含块(父元素)的宽度来计算的。 css .element { width: 100px; /* 或者其他宽度值 */ height: 0; padding-top: 100%; /* padding-...
给宽度设置百分比,然后再填充(当padding-top的值设置成和宽度一致时,就会默认为该标签的高度) width: 24%; padding-top: 24%; 注意:这个时候该标签内的文字会被挤压到该标签的底部。所以为了让文字居中显示,应该给该标签填充上下即可,即: padding: 12% 0;...
max-width:100%; max-height:100%; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } 如果子元素根据父元素设置宽度,那么将其高度设置为0,并将padding-bottom设置为百分比,则该子元素的高度将根据它的宽度计算 .img-box{ width:400px; height:800px; } .img-box img{ width:100%; height...
其实还可以用 vw 来实现,width 和 height 都用 vw 作为单位。不过这一般适合在移动端使用。还看到有通过 calc 计算宽度来实现的height: calc(width);,但是兼容很差?骚断腿,chrome 都无效。可能是根本不行吧。。 js 。 一行代码解决: $(document).ready(function(){$('#box1').css('height',$('#box1'...
最开始,多希望height: calc(width);能够实现。但是,想法没好,现实残酷。这个方法不行。于是,找呀炸呀的。在这里找到了答案。将height设置为0,padding-bottom设置为宽度的百分比就可以了。不明白咋回事,但就是实现了。棒棒哒。不过,除了这种方式,还有另外一种方式。给div加一个before伪元素。然后加入这些样式: div...
height: same-as-width } 泛舟湖上清波郎朗 浏览1935回答 3 3回答 狐的传说 我知道这是个老问题,但我遇到了一个类似的问题做仅用CSS解决。这是我的博客帖子讨论解决方案。在这篇文章中包含了一个活例..代码转载如下。HTML: &...
第二种情况就是宽和高是写在行内中。 比如style="width:120px;"，这中情况通过上述2个方法...
需要知道的是:一个元素的 padding,如果值是一个百分比,那这个百分比是相对于其父元素的宽度而言的,padding-bottom 也是如此。 使用padding-bottom 来代替 height 来实现高度与宽度成比例的效果,将 padding-bottom 设置为想要实现的 height 的值。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的...
接下来根据这一特性开始实现让div的高度等于宽度。 假设是一个div占据屏幕中间90%的区域显示,图片比例是1:1。 首先画一个90%宽,比例为1:1的区域 div{ width: 90%; height: 0; margin: 0 auto; padding-top: 90%; } 图片要放置在这个区域,但是发现高度为0,通过绝对定位实现, ...