您现在的位置是：网站首页> 编程资料编程资料

css轻松实现固定比例的块级容器css实现一个元素高度固定宽度按比例显示效果

2021-09-03 816人已围观

简介这篇文章主要介绍了css轻松实现固定比例的块级容器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

给H5布局的时候一般都会碰到banner（横幅）

比如要显示成2比1 当然后端返回的图片是2比1就好了但事情往往不会那么如意所以怎么办呢？

写死宽高总觉得不妥当

默认width: 100%;让height自适应呢图片会慢慢撑开（产品经理就会说这样用户体验不好我TM就是用户我就觉得挺好）

方法来了

 .banner-wrapper { position: relative; width: 100%; padding-top: 50%; } .banner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

下面说明一下

padding-top: 50%;是个关键用百分比写padding是相对自身的宽的（别问我为什么事实就是这样）

所以width: 100%; padding-top: 50%;就会完美呈现出一个2比1的盒子

最后把img整个的胡上去

完活是不是觉得狠简单用就完了！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：使用纯css实现开关效果如何用css3实现switch组件开关的方法CSS3实现的多组创意互动式开关切换按钮动画特效源码CSS3美化单选/复选/开关按钮样式特效源码纯CSS3实现漂亮的点击开关切换动画效果源码纯CSS3实现的炫酷checkbox复选框美化库checkboxes.css(含开关按钮美化纯css3实现的仿窗帘拉开关闭百叶窗动画特效源码CSS3模拟IOS滑动开关效果纯CSS3实现精美的滑动开关按钮特效纯CSS3简单的滑动开关按钮特效源码纯CSS3实现的开关按钮动画特效源码

下一篇：css布局教程之如何实现垂直居中CSS3 不定高宽垂直水平居中的几种方式利用css样式实现表格中字体垂直居中的方法CSS3实现水平居中、垂直居中、水平垂直居中的实例代码手把手教你CSS水平、垂直居中的10种方式(小结)css常用元素水平垂直居中方案CSS实现垂直居中的几种方法小结CSS垂直居中的另类实现代码详解(不走寻常路)

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网