<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. GitLab 配置模板

    GitLab 配置模板 GitLab 使用模板和参数生成配置文件. 一般来说,我们会通过 gitlab.rb 文件修改配置,例如 Nginx 相关配置. gitlab.rb 只能使用特定的几个 Ngi ...

  2. java 的API及Object类

    一 Java的API Java 的API(API: Application(应用) Programming(程序) Interface(接口)) Java API就是JDK中提供给我们使用的类,这些类 ...

  3. 初识HTML(二）

    目录 HTML表格 HTML列表 HTML表格 表格主要显示.展示数据. 表格基本语法:<table>定义一个表格,<tr>定义表格中的一行,<td>定义一行中的某 ...

  4. C#设计模式之5-单例模式

    单例模式(Singleton Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/397 访问. 单例模式属 ...

  5. java.util.Scanner中hasNext()方法和next()方法的区别

    先说结论: 两者均根据空格划分数据 两者在没有数据输入时均会等待输入 next()方法会将空格划分的数据依次输出,运行一次,输出一个 hasNext()方法会跟着next()方法移动,当前数据不为空, ...

  6. Mac开发工具

    便捷管理你的Mac App Homebrew:https://brew.sh/index_zh-cn 强大的文本编辑器 Sublime Text:http://www.sublimetext.com ...

  7. 封装react antd的upload上传组件

    上传文件也是我们在实际开发中常遇到的功能,比如上传产品图片以供更好地宣传我们的产品,上传excel文档以便于更好地展示更多的产品信息,上传zip文件以便于更好地收集一些资料信息等等.至于为何要把上传组 ...

  8. 编译Uboot时出错：【已解决】 /bin/bash: arm-linux-gcc: command not found dirname: missing operand Try 'dirname --help' for more information.

    编译Uboot时出错: 错误信息如下: /bin/bash: arm-linux-gcc: command not found dirname: missing operand Try 'dirnam ...

  9. 非对称加密与HTTPS(转)

    序:HTTPS更安全,为什么? 因为HTTP协议本身毫无安全性可言. 当你访问一个纯HTTP的网站(以及与这个网站有任何网络交互)时,你发出去一个请求.在这个请求到达网站服务器的路途上,不管是你家的路 ...

  10. 记写 android 微信登录的demo历程

    前言 首先看一条链接: https://github.com/Tencent/WeDemo 腾讯给了一个wedemo,微信第三方登录的例子.里面是php和ios,ios是object写的,php还是原 ...