padding-top:100%解决高度塌陷问题
<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%解决高度塌陷问题的更多相关文章
- 浮动和包含框的关系,伪元素after解决高度塌陷
浮动会使元素尽量向左或向右移动,直到碰到包含框或另外一个浮动元素的盒子模型的边缘 包含框并不会改变里面浮动元素的宽高,浮动元素宽高不会限制在包含块以内 <!DOCTYPE html> &l ...
- 加overflow-hidden就可以解决高度塌陷问题,overflow-触发BFC
1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position ...
- 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)
浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...
- __x__(43)0910第六天__ clearfix 解决:垂直外边距重叠,高度塌陷
<div class="box1"> <tabl></table> <div class="box2">< ...
- overflow:解决 div的高度塌陷问题
高度塌陷是如何引起的? 解析: 当一个 div中所有的子 div都进行了浮动后,那么会出现该问题,那么解决方就是在父 div中 设置其 overflow:hidden;即可解决高度塌陷问题. 方式 ...
- float浮动造成高度塌陷的解决办法
Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...
- 如何解决浮动元素高度塌陷---CSS
解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...
- 浅谈BFC与高度塌陷
这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Cont ...
- 关于float高度塌陷问题
和所有刚入门的菜鸟一样,我发现float有高度塌陷问题,又很偶然的发现float元素后加<img/>能消除float带来的破坏性. 后来百度了一下,大部分的float高度塌陷问题都没有提及 ...
随机推荐
- 微信商户H5支付申请不通过被驳回,拒绝原因提示:网站存在不实内容或不安全信息
一.H5支付简介及使用场景说明 H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付.主要用于触屏版的手机浏览器请求微信支付 ...
- idea如何打war包(不使用maven)
用多了maven的小伙伴,应该快忘了怎么不用maven打war包了吧,我也快忘了,所以趁我还记得,赶紧记录下来,多年后,当我回忆起往事........ 而且网上的教程也太坑了吧,牛头不搭马嘴,这害死多 ...
- JavaScript 实用方法
1.按时间显示问候语 2.强制光标停留位置 3.保存页面文本 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN& ...
- C#LeetCode刷题之#633-平方数之和( Sum of Square Numbers)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3885 访问. 给定一个非负整数 c ,你要判断是否存在两个整数 ...
- 谈谈对volatile关键字的理解
1. volatile的特性 volatile是Java语言提供的一种轻量级的同步机制,用来确保将变量得更新操作通知到其它线程.具备三种特性: 保证变量的可见性: 对于volatile修饰的变量进行单 ...
- hge引擎示例教程cmake项目
hge引擎的示例代码在vs2017不能很好的运行,需要调不少东西,所以我将其重新整理成cmake的项目. 所有示例均在vs2017 msvc 下测试可以正常运行. 由于缺少libhgehelp.a所以 ...
- 线段树(二)STEP
线段树(二) 线段树例题整理 Part 1:题面 传送门:https://www.luogu.com.cn/problem/P6492(靠之前传送门放错了,暴露了我在机房逛B站的事实-- Part 2 ...
- markdown插入表情
找到了一个网站https://www.webfx.com/tools/emoji-cheat-sheet/,直接把表情对应的符号复制粘贴就行了. 比如:joy:显示为 部分截图:
- window下git多账户管理
前言 一般情况下,我们都是一台电脑配置一个Git账号,使用如下命令: git config --global user.name "your name" git config -- ...
- Vue管理系统前端系列一vue-cli4.x 初始化项目
目录 项目介绍 技术基础 开发环境 安装工具 快速原型开发 创建项目 配置相关说明 目录结构 项目介绍 lion-ui 是一个基于 RBAC 的管理系统前端项目,采用 vue 和 element-ui ...