<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. week4:周测错题

    4.如何在类外,给对象动态添加绑定方法 import types def qingtianzhu(obj,name): print("请我叫我一柱擎天,简称{},颜色是{}".fo ...

  2. Java—时间的原点 计算时间所使用的 Date类/DateFormat类/Calendar类

    Date类 类 Date 表示特定的瞬间,精确到毫秒. 毫秒概念:1000毫秒=1秒 毫秒的0点: System.currentTimeMillis()  返回值long类型参数 用于获取当前日期的毫 ...

  3. 用python爬虫监控CSDN博客阅读量

    作为一个博客新人,对自己博客的访问量也是很在意的,刚好在学python爬虫,所以正好利用一下,写一个python程序来监控博客文章访问量 效果 代码会自动爬取文章列表,并且获取标题和访问量,写入exc ...

  4. Kubernetes基于haproxy实现ingress服务暴露

    HAproxy Ingress控制器 HAproxy Ingress简介 HAProxy Ingress watches in the k8s cluster and how it builds HA ...

  5. 谈谈 Qt4 中文乱码的解决

    本文只描述Qt4的解决方法,Qt5没有尝试过,不做讨论.网上关于这个话题一搜一大堆,基本无外乎字符集编码的理论,看不明白.直接上代码吧! #include "widget.h" # ...

  6. Java 泛型（参数化类型）

    Java 泛型 Java 泛型(generics)是 JDK 5 中引入的一个新特性, 泛型提供了编译时类型安全检测机制,该机制允许程序员在编译时检测到非法的类型. 泛型的本质是参数化类型,也就是说所 ...

  7. linux驱动之模块化编程小总结

    本文包含了linux驱动模块化编程的基本,包括创建多线程,延时,以及makefile 以一个实例来说明 #include<linux/init.h> #include<linux/m ...

  8. 11.oracle 事务

    一.什么是事务事务用于保证数据的一致性,它由一组相关的dml语句组成,该组的dml(数据操作语言,增删改,没有查询)语句要么全部成功,要么全部失败.如:网上转账就是典型的要用事务来处理,用于保证数据的 ...

  9. python之常用正则表达式

    以下整理python中常用的正则符号,相信能够熟悉掌握这些正则符号,大部分字符串处理将会游刃有余. 符号 含义 示例 . 可以匹配任意字符,但不包含换行符'\n' Pyt.on ->Pytmon ...

  10. Python九九乘法表（正序和逆序）

    正序: for i in range(1,10): for j in range(1,i+1): print(str(i)+"*"+str(j)+"="+str ...