由于padding-top和padding-bottom的百分比值是相对于其父元素的宽度计算的,因此可以通过设置padding-top或padding-bottom的百分比值(等于100%),然后设置height: 0;(或不需要设置height,因为padding会撑起高度),来实现高度等于宽度的效果。 CSS代码示例: css .square { width: 50%; /* 或任意固定宽度 */ padding-...
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...
给宽度设置百分比,然后再填充(当padding-top的值设置成和宽度一致时,就会默认为该标签的高度) width: 24%; padding-top: 24%; 注意:这个时候该标签内的文字会被挤压到该标签的底部。所以为了让文字居中显示,应该给该标签填充上下即可,即: padding: 12% 0;...
在工作中遇见一个问题 宽度不一定,但是想让box为正方形; 比如width:50%;之后设置该box为正方形设置height:0;padding-bottom:100%;
最开始,多希望height: calc(width);能够实现。但是,想法没好,现实残酷。这个方法不行。于是,找呀炸呀的。在这里找到了答案。将height设置为0,padding-bottom设置为宽度的百分比就可以了。不明白咋回事,但就是实现了。棒棒哒。不过,除了这种方式,还有另外一种方式。给div加一个before伪元素。然后加入这些样式: div...
height: same-as-width } 泛舟湖上清波郎朗 浏览1937回答 3 3回答 狐的传说 我知道这是个老问题,但我遇到了一个类似的问题做仅用CSS解决。这是我的博客帖子讨论解决方案。在这篇文章中包含了一个活例..代码转载如下。HTML: &...
$('#box1').css('height',$('#box1').css('width')); })#box{width:900px;height:400px;border:1pxsolid red; }#box1{width:50%;border:1pxsolid green; }
纯css设置元素高度与宽度相等
设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ width:100%; height:100%; position: absolute; } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 如果仅仅想要外层div同宽高,而图片保持原图大小不被撑大, 可以将图片属性换成下面...
设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ width:100%; height:100%; position: absolute; } 如果仅