今天学了慕课网的去哪了视频轮播图的图片自适应是这么做的htm,cssl如下:为什么padding-bottom 取值62.08% 呢,因为图片的高为465px,宽为749px。 465/749 既为62.08%。 cell的padding-bottom撑起了cell的高度,这个百分度取值是相对于cell宽度的百分比,而不是父容器banner高度的百分比。此时我们就解决了图片的自适应问题。

<div class="banner">
<div class="cell">
<img src="data:images/img.png">
</div>
</div>
.banner {
width: 700px;
height: 700px;
border: 1px solid #000;
margin: 0 auto;
} .cell {
width: 100%;
height: 0;
padding-bottom: 62.08%;;
overflow: hidden;
background: red;
} img {
width: 100%;
}

padding-bottom图片自适应的更多相关文章

  1. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  2. css利用padding百分比实现图片自适应高度

    应用场景 宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题 重点:CSS百分比padding都是相对宽度计算的 <div class=" ...

  3. Android ImageView图片自适应 (转)

    网络上下载下来的图片自适应:android:adjustViewBounds="true"(其详细解释在下面)<ImageView     android:id=" ...

  4. Android ImageView图片自适应

    网络上下载下来的图片自适应:android:adjustViewBounds="true"(其详细解释在下面) <ImageView     android:id=" ...

  5. 基于jQuery图片自适应排列显示代码

    基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  7. 基于html5背景图片自适应代码

    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jaw ...

  8. css控制div下图片自适应解决方法:图片不超过最大宽度

    我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...

  9. 【原】文本图片自适应高度小bug以及解决办法

    自定义cell的文本图片自适应高度代码,如果存在自定义的cell赋值封装,就必须将自适应高度代码写在这个方法中

  10. css控制图片自适应大小

    相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决.      该CSS的功能是:大于600的图片自动调整为600显示. <style ...

随机推荐

  1. win7禁用Adnimistrator账号登录

    开始 运行 输入 lusrmgr.msc 回车. 双击 用户,双击Administrator ,在 账户已禁用 前面打上勾即可.然后确定.

  2. 在mvc中动态加载菜单

    最近做了一个项目, 要在客户端动态的显示菜单,也就是这些菜单是保存在数据库中的, 在客户端动态加载菜单,这样做的好处很明显,就是菜单很容易修改,直接在后台进行维护,再也不会直接在前面的 视图页面中进行 ...

  3. 【Selenium-WebDriver自学】Selenium-IDE调试(四)

    ==================================================================================================== ...

  4. 插入排序(直接插入、折半、Shell)

    直接插入排序(顺序插入排序) 基本思想: 排序过程,整个排序过程为n-1趟插入,即先将序列中的第1个元素看成是一个有序子序列,然后从第2个元素开始,逐个进行插入,直至整个序列有序. 在有序序列中插入一 ...

  5. redis的5种类型和所用命令

    数据操作 redis是key-value的数据,所以每个数据都是一个键值对 键的类型是字符串 值的类型分为五种: 字符串string 哈希hash 列表list 集合set 有序集合zset 数据操作 ...

  6. 快速了解CSS3当中的HSLA 颜色值怎么算

    CSS3文档中提到:(HSLA) H是色度,取值在0度~360度之间,0度是红色,120度是绿色,240度是蓝色.360度也是红色. S是饱和度,是色彩的纯度,是一个百分比的值,取值在0%~100%, ...

  7. 阿里云SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo failed: Temporary failure in name resolution

    如果是阿里云的服务器 SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo failed: Temporary failure in ...

  8. 6.简单提取小红书app数据保存txt-2

    对页面信息进行简单抓取: 需要注意的问题 : auth-sign 和 auth 都是有一定的时效性,还有url原url是https这里要改为http请求. 这参数的问题需要通过mitmdump去获取请 ...

  9. python中的insert

    insert()往列表的指定位置添加元素,举个例子: 1 a = ["hello", "world", "dlrb"] 2 a.insert ...

  10. spark核心原理

    spark运行结构图如下: spark基本概念 应用程序(application):用户编写的spark应用程序,包含驱动程序(Driver)和分布在集群中多个节点上运行的Executor代码,在执行 ...