今天学了慕课网的去哪了视频轮播图的图片自适应是这么做的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. ELK新手教程(二)

    暂不排版,后面整理. logstash 使用配置文件 在bin目录下创建一个名为test.conf的文件,内容为: input { stdin {} } output { stdout{} } 执行命 ...

  2. Element-UI安装和项目开发

          方法一:引入CDN 使用起来最简单的方法,直接引入CDN就可以工作了 <!-- 引入样式 --> <link rel="stylesheet" hre ...

  3. WPF圆角按钮与触发颜色变化

    <Button x:Name="button1" Content="按钮1" Margin="10,10,0,0" Cursor=&q ...

  4. qt之菜单栏的创建

    很久之前学习的Qt菜单栏的消息响应,昨天发现忘记了,今天又拿起来了,记一下笔记: 就像平常我们常用的软件一样,每个程序基本都有菜单栏,在菜单栏中有很多功能性的按钮,点击这些按钮会弹出有对应的菜单功能, ...

  5. 【Tomcat】Tomcat安装及Eclipse配置教程

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

  6. 《算法》第六章部分程序 part 7

    ▶ 书中第六章部分程序,加上自己补充的代码,包括全局最小切分 Stoer-Wagner 算法,最小权值二分图匹配 ● 全局最小切分 Stoer-Wagner 算法 package package01; ...

  7. python学习笔记_week15

    note 上节作业问题: 1.css重用 <style> 如果整个页面的宽度 > 900px时: { .c{ 共有 } .c1{ 独有 } } .c2{ 独有 } </styl ...

  8. 查SQLserver性能瓶颈

    https://www.cnblogs.com/wayne-ivan/p/3821750.html

  9. Mybatis:通过MapperScannerConfigurer进行mapper扫描

    在applicationContext.xml里配置的

  10. ubuntu 使用sudo apt-get update命令的时候会报http://archive.ubuntukylin.com:10006/ubuntukylin/dists/xenial/InRelease 无法连接

    参考:  https://blog.csdn.net/xiaoyan94/article/details/52404539 于是找到一个包含 http://archive.ubuntukylin.co ...