<div class="box">
<img src="img/2222.jpg" />
</div>
.box {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
} .box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

css设置图片的高等于图片的高的更多相关文章

  1. CSS设置标签、图片放大、缩小、旋转、移动(tranform)

    CSS设置标签.图片放大.缩小.旋转.移动(tranform) 1.缩小和放大属性(scale) 格式:tranform:缩小类型(数值): 注意:缩小和放大都是 scale : 其中的值(0~1)代 ...

  2. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  3. css 设置背景图片模糊,内容不模糊

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...

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

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

  5. css 设置头像图片不变形

    css 设置头像图片不变形 在样式中加 object-fit: cover 就可以了

  6. css设置背景图片

    background:pink;图片在背景图上面 background-image:url(food.jpg);一张图片铺满一行background-repeat:repeat-x;同一张图片多张铺满 ...

  7. 点击滚动图片JS部分代码以及css设置注意事项

    下面js代码可以实现8张图片点击左右按钮后切换的过渡动画效果 var pslul11=document.getElementById('pslul11')var pslspan1=document.g ...

  8. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

  9. line-height行高与图片的隐匿文本间隙消除方法

    (标注 文章来源 http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-hei ...

随机推荐

  1. 攻防世界--game

    题目链接:https://adworld.xctf.org.cn/task/answer?type=reverse&number=4&grade=0&id=5074 1.准备 ...

  2. 挖坑指南:iView-admin动态配置route.meta.title

    原文链接 前言 新的项目,基于iView-admin.结合自身的项目需求,对官方的模板进行一些修改.以达到动态修改route.meta,并同步更新面包屑导航文字和标签页标题. 开始 如果你还未使用过i ...

  3. SCM

    scm即软件配置管理. 软件配置管理(SCM)是指通过执行版本控制.变更控制的规程,以及使用合适的配置管理软件,来保证所有配置项的完整性和可跟踪性,配置管理是对工作成果的一种有效保护. SCM(Sof ...

  4. python方法参数:*和**操作符

    * def test_args_kwargs(arg1, arg2, arg3): print("arg1:", arg1) print("arg2:", ar ...

  5. kd树解平面最近点对

    早上起来头有点疼,突然就想到能不能用kd树解平面最近点对问题,就找了道题试了一下,结果可以,虽然效率不高,但还是AC了~ 题目链接:http://acm.hdu.edu.cn/showproblem. ...

  6. 前端-PC端瀑布流【10张图】

    .HTML 利用封装的 jquerywaterfall.js 方法 完成 <!DOCTYPE html> <html lang="en"> <head ...

  7. Delphi Win API 函数 MulDiv

    Delphi Win API 函数 MulDiv 原型:function MulDiv(nNumber, nNumerator, nDenominator: Integer): Integer; st ...

  8. node-解压版 安装配置测试

    一.下载node压缩包   地址:https://nodejs.org/en/download/ 二.解压下载的压缩包,在文件根目录新增两个文件夹: node_cache:缓存文件位置 node_gl ...

  9. Flink State 有可能代替数据库吗?

    有状态的计算作为容错以及数据一致性的保证,是当今实时计算必不可少的特性之一,流行的实时计算引擎包括 Google Dataflow.Flink.Spark (Structure) Streaming. ...

  10. 企业级Web服务器安全主动防御措施

    篇一 : 企业级Web服务器安全主动防御措施 Web服务器现在已经成为了病毒.木马的重灾区.不但企业的门户网站被篡改.资料被窃取,而且还成为了病毒与木马的传播者.有些Web管理员采取了一些措施,虽然可 ...