<div class="img_box">
<img src="http://sms-shop.oss-cnbeijing.aliyuncs.com/${item.bannerpic.split(',')[0]}"/>
</div> .img_box {
position: relative;
width: 90%;
padding-bottom: 100%;
} .img_box img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}

  

padding-top:100%解决高度塌陷问题的更多相关文章

  1. 浮动和包含框的关系,伪元素after解决高度塌陷

    浮动会使元素尽量向左或向右移动,直到碰到包含框或另外一个浮动元素的盒子模型的边缘 包含框并不会改变里面浮动元素的宽高,浮动元素宽高不会限制在包含块以内 <!DOCTYPE html> &l ...

  2. 加overflow-hidden就可以解决高度塌陷问题,overflow-触发BFC

    1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position ...

  3. 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

    浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...

  4. __x__(43)0910第六天__ clearfix 解决:垂直外边距重叠,高度塌陷

    <div class="box1"> <tabl></table> <div class="box2">< ...

  5. overflow:解决 div的高度塌陷问题

    高度塌陷是如何引起的? 解析: 当一个 div中所有的子  div都进行了浮动后,那么会出现该问题,那么解决方就是在父 div中 设置其  overflow:hidden;即可解决高度塌陷问题. 方式 ...

  6. float浮动造成高度塌陷的解决办法

    Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...

  7. 如何解决浮动元素高度塌陷---CSS

    解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...

  8. 浅谈BFC与高度塌陷

    这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Cont ...

  9. 关于float高度塌陷问题

    和所有刚入门的菜鸟一样,我发现float有高度塌陷问题,又很偶然的发现float元素后加<img/>能消除float带来的破坏性. 后来百度了一下,大部分的float高度塌陷问题都没有提及 ...

随机推荐

  1. 盘点 35 个 Apache 顶级项目,我拜服了…

    Apache 软件基金会 Apache 软件基金会,全称:Apache Software Foundation,简称:ASF,成立于 1999 年 7 月,是目前世界上最大的最受欢迎的开源软件基金会, ...

  2. 2020-08-01:MySQL 的数据如何恢复到任意时间点?

    福哥答案2020-08-01: 恢复到任意时间点以定时的做全量备份,以及备份增量的 binlog 日志为前提.恢复到任意时间点首先将全量备份恢复之后,再此基础上回放增加的 binlog 直至指定的时间 ...

  3. JavaScript 回调函数的简单示例

    回调函数 回调函数也被称为高阶函数 所谓高阶函数,就是说值 函数作为参数被传递或者返回值输出 操作函数的函数称为 高阶函数 把一段可执行的代码(一个函数)作为参数传递给其他的代码(另一个函数),并在需 ...

  4. HBase存储及读写原理介绍

    一.HBase介绍及其特点 HBase是一个开源的非关系型分布式数据库,它参考了谷歌的BigTable建模,实现的编程语言为Java.它是Apache软件基金会的Hadoop项目的一部分,运行于HDF ...

  5. itest(爱测试) 开源一站式敏捷测试管理平台&极简项目管理,重大升级(接口测试)6.0.0 发布

    itest 简介 itest 开源敏捷测试管理,testOps 践行者,极简的任务管理,测试管理,缺陷管理,测试环境管理,接口测试5合1,又有丰富的统计分析.可按测试包分配测试用例执行,也可建测试迭代 ...

  6. 金题大战Vol.0 B、序列

    金题大战Vol.0 B.序列 题目描述 给定两个长度为 \(n\) 的序列\(a\), \(b\). 你需要选择一个区间\([l,r]\),使得\(a_l+-+a_r>=0\)且\(b_l+-+ ...

  7. 报错:org.apache.ibatis.type.TypeException: Could not resolve type alias 'com.deppon.gis.module.job.server.server.impl.HaoDuanEntity'.

  8. Golang笔记整理--第二天

    一. 标识符 Go语言标识符构成规则:开头第一个字符必须是字母或者是下划线,后面可以跟任意多个字符,数子或者下划线,并且区分大小写. 例: _aa11 //合法标识符 aa11 //合法标识符 _aa ...

  9. js、jQuery、ajax面试题

    1.javascript的typeof返回哪些数据类型. 答案:string,boolean,number,undefined,function,object 2.例举3种强制类型转换和2种隐式类型转 ...

  10. 分享一个bootstrap的上一步,下一步的插件

    效果图: 下载链接: https://www.daimabiji.com/index.php?m=content&c=down&a_k=ae0fI1gZyLT7oao56Pgu-dye ...