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. 对异步处理的http接口进行性能测试

    以前对接口做性能测试,接口都是同步处理的,请求之后等待响应结果就知道处理结果了,这样只要看这个接口是否异常,如果无异常无报错记录这个接口的响应时间.TPS等性能指标进行分析就可以了,最近在工作中遇到了 ...

  2. ElementUi tree 指定节点是否显示复选框

    场景:树的内容是省份下面的城市有酒店 需求:只能多选酒店(为了删除它们),至于为啥不能选省份或者城市更加灵活的去删除相应酒店,这你得去问后台0.0,他只弄了根据酒店id去删除.嗯,连创建酒店的时候级联 ...

  3. 爬虫urllib2中Handler处理器和自定义Opener

    Handler处理器 和 自定义Opener opener是 urllib2.OpenerDirector 的实例,urlopen是一个特殊的opener(也就是模块已经构建好的). 但是基本的url ...

  4. 认领该应用 apk空白包签名 方法

    起因: apicloud开发的项目,上架应用宝市场,被要求做这个 解决方法: 下载签名工具,并解压缩.解压缩.解压后是两个文件夹,选择keystore签名工具. 下载地址: linux 签名工具(命令 ...

  5. Idea控制台中文乱码

    在菜单栏找到”run->editconfigration” 找到”server”选项卡 设置 vm option为 -Dfile.encoding=utf-8

  6. [LeetCode] 139. Word Break 单词拆分

    Given a non-empty string s and a dictionary wordDict containing a list of non-empty words, determine ...

  7. NGINX安全配置和限制访问

    说起网络攻击,可能很多人只知道大名鼎鼎的DDOS攻击,这种攻击廉价且效果出众,直接通过第四层网络协议用他的带宽把你的带宽顶掉,造成网路阻塞,防不胜防,就连腾讯这种大鳄公司也被大流量DDOS搞过焦头烂额 ...

  8. 前端HTML学习心得

    学习最好的效果就是理论加实践--Hanks!!!(给大家打鸡血的哈哈哈) 前面的学习我教大家怎么搭建简单的前端开发环境,现在我教大家怎么使用工具学习(从入门到放弃哈哈,不不不,这是以前的我,现在我下了 ...

  9. 如何配置STP

    一.搭建本次实验的拓扑结构 两台s5700交换机模拟核心交换,两台s3700交换机模拟接入交换机,核心上配置eth-trunk   二.开启所有交换机的stp功能 开启stp [S1]stp enab ...

  10. Linux thread process and kernel mode and user mode page table

    Linux 中线程和进程切换的开销: Linux 操作系统层面的进程和线程的实现都是task_struct描述符. task_struct 包含成员变量:内核态stack.  这些都存在3-4G虚拟地 ...