<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. java crm 系统 进销存 springmvc SSM项目项目源码

    统介绍: 1.系统采用主流的 SSM 框架 jsp JSTL bootstrap html5 (PC浏览器使用) 2.springmvc +spring4.3.7+ mybaits3.3  SSM 普 ...

  2. combox系列问题集

    visual studio崩溃 你是不是经常会遇到一编辑combox,visual studio就会立马崩溃.一直都无法理解是什么原因,然后后来发现居然是因为有道的截屏翻译,关掉截屏翻译就好了. co ...

  3. 2019-9-2-win10-uwp-打电话

    title author date CreateTime categories win10 uwp 打电话 lindexi 2019-09-02 12:57:38 +0800 2018-2-13 17 ...

  4. MySQL--19 MHA切换日志分析

    MHA切换检测日志分析 GTID模式 [root@db03 ~]# tail -f /etc/mha/manager.log #在MySQL select ping:2006上出错(MySQL服务器已 ...

  5. python如何获取变量的变量名

    假设现在存在一个值为1变量名为a的变量,如何通过一个函数获取该变量的变量名a? 上面这个需求来源于某群友的一个要求,希望能有一个这样的函数来方便打印. 这个需求很扯淡啊,为什么不用格式化输出?它回复到 ...

  6. 一、Spring Boot系列:通过Maven创建第一个项目

    1.打开idea选择创建工程 2.创建maven工程,同时选择jdk1.8 注意:不需要勾选其他选项 3.填写项目名称 4.创建好maven项目后,在pom.xml文件中导入Spring Boot需要 ...

  7. Echarts 自定义数据视图

    toolbox : { show : true, feature : { dataView : { optionToContent : function(option) { // 行名称 var ax ...

  8. [BZOJ5305] [HAOI2018] 苹果树 数学 组合计数

    Summary 题意很清楚: 小 \(C\) 在自己家的花园里种了一棵苹果树, 树上每个结点都有恰好两个分支. 经过细心的观察, 小 \(C\) 发现每一天这棵树都会生长出一个新的结点. 第一天的时候 ...

  9. Python 石头 剪刀 布

    di = {1: '石头', 2: '剪刀', 3: '布'} def win(x, y): if len({x[0], y[0]}) == 1: print('平局.') else: if {x[0 ...

  10. C#调用谷歌翻译API

    原资料为网上找到的原稿为:http://www.cnblogs.com/marso/p/google_translate_api.html(此处只做个人笔记参考) 主要分两块:通过WebRequest ...