css代码:

        .img-box {
padding-bottom: 100%;
} .img-box img {
position: absolute;
top:;
bottom:;
left:;
right:;
width: 100%;
/* margin:auto; */
}

html标签:

<div class="img-box">
<img src="data:image/banner_1_nn.png" />
</div>

css设置图片百分比显示,最简洁的代码的更多相关文章

  1. css设置图片居中、居左、居右

      CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...

  2. vue打包后js和css、图片不显示,引用的字体找不到问题

    vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...

  3. CSS设置图片垂直居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  4. CSS设置图片居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  5. 用CSS控制图片大小显示的方法

    图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定), ...

  6. CSS实现图片圆角显示

    问题描述 在自定义博客园侧边栏公告时,想增加博客头像,但图片默认显示成是方形的,不是很好看,想着改成圆角显示会漂亮些 解决方案 增加css样式 border-radius:25px; 上面的像素值根据 ...

  7. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  8. css设置图片水平及垂直居中

    .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:cen ...

  9. 关于HTML+CSS设置图片居中的方法

    有的时候我们会遇到这样一个问题,就是当我们按下F12进行使用firebug调试的时候,我们发现图像没有居中,页面底下有横向的滑动条出现,图片没能够居中,默认状态下只是紧靠在页面最左侧,而我们对图像缩小 ...

随机推荐

  1. linux列出当前目录下的所有的目录?

    ###  列出当前目录下的所有目录: [root@localhost ~]# ls -ld * #列出所有的文件 drwxr-xr-x. root root Nov : elasticsearch d ...

  2. java8 用Optional取代null

    如何处理null 怎样做才能避免不期而至的NullPointerException呢?通常,可以在需要的地方添加null的检查(过于激进的防御式检查甚至会在不太需要的地方添加检测代码),并且添加的方式 ...

  3. [LeetCode] 507. Perfect Number 完美数字

    We define the Perfect Number is a positive integer that is equal to the sum of all its positive divi ...

  4. 【视频开发】【Live555】live555实现h264码流RTSP传输

    1.概述 liveMedia 库中有一系列类,基类是Medium,这些类针对不同的流媒体类型和编码. 其中的StreamFrame类文件(如MPEG4VideoStreamFramer)为流传输关键. ...

  5. php_mvc实现步骤八

    shop34-10-框架类 框架类(框架初始化类) 将原来入口文件中功能,放在该类中完成,入口文件变得简单,轻量! 将入口文件中的各个功能,由框架类的各个方法,完成: 为了简单化,使用纯静态的类.(看 ...

  6. 【转】Fuel 9.0安装Openstack网络验证失败解决

    原文链接:https://blog.csdn.net/wiborgite/article/details/52983575 故障现象: 网络验证失败,报错信息如下: Repo availability ...

  7. 【C++札记】实现C++的string类

    C++有了string类使得操作字符串变得很方便.有关string类,面试过程中也经常问到的就是自己实现一个sring类.下边实现个String类供大家参考: String.h #pragma onc ...

  8. PAT(B) 1070 结绳(Java)

    题目链接:1070 结绳 (25 point(s)) 题目描述 给定一段一段的绳子,你需要把它们串成一条绳.每次串连的时候,是把两段绳子对折,再如下图所示套接在一起.这样得到的绳子又被当成是另一段绳子 ...

  9. PHP 可变参数

    <?php //php 可变参数 function concatenate( ...$strings): string { $string = ''; //此时的strings 是一个数组 fo ...

  10. flink linux安装 单机版

    1.下载二进制的Flink,根据你喜欢的Hadoop/Scala版本选择对应的Flink版本. https://flink.apache.org/downloads.html2.选择存放目录 解压 f ...