纯 CSS实现根据元素已知的宽度设置高度以及注意事项

最新推荐文章于 2024-07-25 09:45:35 发布

Quiet-Night

最新推荐文章于 2024-07-25 09:45:35 发布

阅读量1.4w

点赞数 1

分类专栏： Web前端 css 文章标签： css

本文链接：https://blog.csdn.net/DeepLies/article/details/77267823

版权

通过CSS实现元素宽度和高度一致，以创建正方形元素。关键在于使用`padding-top`的百分比值，该值基于元素宽度。文章探讨了`padding-top`的原理，指出百分比值是相对于宽度而非高度，并提醒在使用此技巧时，需要注意子元素可能受到的影响，可能导致被挤压到父元素外部。解决方案是添加`position: relative;`和`overflow: hidden;`。

摘要由CSDN通过智能技术生成

一个移动端的小需求，元素的宽度根据屏幕宽度进行获取，也就是实时获取，可以当成单位是百分比%，要求元素表现为正方形，也就是说高度要等于宽度。

发现这个需求的时候，我第一时间就是想用 js来控制，根据屏幕宽度来计算出元素宽度值，并将元素的高度也赋值成这个值，这样一来就实现元素的宽度、高度一致了，没什么难度，几行代码嗖嗖地搞定。

不过这个需求其实只是我正在做的项目的一个小点而已，我当时正在专心致志地写 css，做过稍大一点项目的人都知道，各种切换代码最烦了，宁愿在浏览器上另开一个窗口看看有没有其他的办法也不想切换项目文件夹来回折腾，所以我就网上搜了一下，确实让我看到了一个方法。

不说废话，先上代码：

// HTML
<div class="box">
    <img src="https://dummyimage.com/400x500/ff3ff3)" alt="">
</div>

// CSS
.box {
  position:relative;
  width:40%;
  height:0;
  font-