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. NamedPipeStream的使用案例

    NamedPipeStream的使用具体案例如下: using System; using System.Data; using System.Data.SQLite; using System.IO ...

  2. JavaScript工具类(三):localStorage本地储存

    localStorage Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加.删除.修改.查询操作. ...

  3. linux升级openssl和php_openssl模块

    一.OpenSSL源码升级 2014年4月8日,XP宣布正式停止服务的日子,也是OpenSSL爆出大漏洞的日子. OpenSSL主要是负责在一些敏感的数据提交上面被广泛使用,不乏大家经常访问的一些网站 ...

  4. Wise Force Deleter 强制删除文件工具

    https://www.xitmi.com/3321.html   Wise Force Deleter v1.49 中文绿色版 强制删除文件工具

  5. Mac 上ssh远程连接Linux服务器提示Host key verification failed.

    当我们对重装远程服务器的时候会出现Host key verification failed问题 解决办法: rm -rf ~/.ssh/known_hosts 重新ssh连接,OK!

  6. 使用EF 4.1的DbContext的方法大全

    简述:EF4.1包括Code First和DbContext API.DbContext API为EF提供更多的工作方式:Code First,Database First和Model First. ...

  7. 【Shell常用命令一】echo bash alias history 输出重定向 快捷键

    echo输出命令 echo [选项] [输出内容] -e : 支持反斜线控制的字符转换 赋予执行权限 直接运行 chmond 755 hello.sh ./hello.sh 通过bash调用执行脚本 ...

  8. 并行编程架构(指令流水、进程、线程、多核,Pipe and Filter)

    最近在进行DSP软件优化时,查阅文献,看到了几种并行机制,下面予以总结: 关键词一:指令流水 关键词二:多进程 关键词三:多线程 关键词四:多核(多处理器.超线程结构.多核结构.多核超线程架构) 在体 ...

  9. PHP设计模式 - 建造者模式

    建造者模式主要在于创建一些复杂的对象.将一个复杂对象的构造与它的表示分离,使同样的构建过程可以创建不同的表示的设计模式; 结构图: <?php /** * * 产品本身 */ class Pro ...

  10. js玩命加载……

    在请求数据加载的过程中,经常需要显示请求等待,写了一个简单的请求等待—- html代码如下 <!--页面载入显示--> <div id="dataLoad" st ...