1. <div class="box">
  2. <img src="img/2222.jpg" />
  3. </div>
  1. .box {
  2. position: relative;
  3. width: 100%;
  4. height: 0;
  5. padding-bottom: 100%;
  6. }
  7.  
  8. .box img {
  9. position: absolute;
  10. top: 0;
  11. left: 0;
  12. width: 100%;
  13. height: 100%;
  14. }

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. JVM(13)之 阶段回顾

    开发十年,就只剩下这套架构体系了! >>>   各位小伙伴,到上一篇博文为止,我们的内存模型相关知识就已经讲完了!讲!完!了!不知道大家吸收了多少,这里我们简单的来回顾一下吧!    ...

  2. JS继承——原型链

    许多OO语言支持两种继承:接口继承和实现继承.ECMAScript只支持实现继承,且继承实现主要依赖原型链实现. 原型链 基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法. 构造函数.原 ...

  3. weblogicjsp编译:查看编译后的java中间代码

    转自:https://www.xuebuyuan.com/1069484.html 运行自己配置的web应用,往往只能看见weblogic编译之后的class文件.而看不见编译前的java的文件.为了 ...

  4. 【记录】logstash 的filter 使用

    概述 logstash 之所以强大和流行,与其丰富的过滤器插件是分不开的 过滤器提供的并不单单是过滤的功能,还可以对进入过滤器的原始数据进行复杂的逻辑处理,甚至添加独特的新事件到后续流程中 强大的文本 ...

  5. linux内存子系统调优

  6. rk3288 android5.1 修改时区

    /work/rk3288/firefly-rk3288_android5.1_git_20180126/device/rockchip/rk3288/rk3288_box/system.prop 修改 ...

  7. Java疯狂讲义笔记——内部类

    [定义]内部类:定义在其它类内部的类.外部类:包含内部类的类,也称 宿主类.局部内部类:定义在方法里的内部类. [接口内部类]接口中也可以定义内部类,必须为public static修饰(自动添加), ...

  8. Linux学习之旅(二)Linux文档操作

    目录操作 1. 创建目录 // 目录可以是绝对路径,也可以是相对路径 mkdir 目录名 //创建一个目录 mkdir -p 目录名1/目录名1/... //一次性创建多级目录 2. 删除目录 // ...

  9. 吉首大学2019年程序设计竞赛(重现赛) B 干物妹小埋

    链接:https://ac.nowcoder.com/acm/contest/992/B来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K ...

  10. 线程安全与非线程安全集合说一下,底层怎么实现的(hashmap,concurrenthashmap)

    Hashmap本质是数组加链表.根据key取得hash值,然后计算出数组下标,如果多个key对应到同一个下标,就用链表串起来,新插入的在前面. ConcurrentHashMap:在hashMap的基 ...