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. mysql实现oracle存储过程默认参数

    我们都知道oracle存储过程支持为参数设置默认值,这样即使存储过程升级,原来的调用也可以不受影响.但是mysql不支持,mariadb也没有支持(截止10.4也是如此).但是这一限制会导致升级麻烦重 ...

  2. 【转】23 个安卓重难点突破,带你吃透 Service 知识点「长达 1W+ 字」

    前言 学 Android 有一段时间了,想必不少人也和我一样,平时经常东学西凑,感觉知识点有些凌乱难成体系.所以趁着这几天忙里偷闲,把学的东西归纳下,捋捋思路. 这篇文章主要针对 Service 相关 ...

  3. Program不是内部命令也不是外部命令

    在项目中使用java动态生成.bat文件,再调试时执行bat文件失败! 显示:Program不是内部命令也不是外部命令 百度了一下:C:\"Program Files"或progr ...

  4. Flutter Dart List.map() 获取下标

    class HomePageState extends State{ final topTitles = ['审批单', '机票列表', '客服']; final topIcons = ['asset ...

  5. OpenStack Neutron单网卡桥接模式访问外网

    环境配置: * Exsi一台 * Exsi创建的单网卡虚拟机一台 * Ubuntu 14LTS 64位操作系统 * OpenStack Liberty版本 * 使用Neutron网络而非Nova网络 ...

  6. Oracle表存在则删除后再重建

    简单的执行方式: drop table USERINFO; create table USERINFO ( EnglishName ), ChineseName ), Sex ), Age int, ...

  7. [转]MathJax与LaTex公式简介

    链接地址:https://www.cnblogs.com/linxd/p/4955530.html

  8. [LeetCode] 45. Jump Game II 跳跃游戏 II

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  9. [LeetCode] 242. Valid Anagram 验证变位词

    Given two strings s and t , write a function to determine if t is an anagram of s. Example 1: Input: ...

  10. PHP实现的MongoDB数据增删改查

    原文地址:https://www.mongodb.org.cn/drivers/2.html   (该网站为mongoDB官方网站) php中使用mongodb你必须使用 mongodb 的 php驱 ...