<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. saltstack的高级管理

    一.saltstack的状态管理 状态管理官网: https://www.unixhot.com/docs/saltstack/ref/states/all/index.html 1)状态分析 [ro ...

  2. 全栈开发系列学习2——django项目搭建

    项目代码:http://yunpan.cn/cHajgT4HvgHqx (提取码:8350) 配置项目: 1. 首先确保你的机器安装了python和pip,这两种安装比较简单,这里就不说了. 2. 在 ...

  3. ubuntu16.04编译linux3.9内核

    下载linux内核 解压内核 tar -xvf 安装低版本gcc,不然会报错 apt-cache search gcc-4.7 sudo apt-get install 搜索的名字 设置默认gccsu ...

  4. css浮动、定位到底什么鬼?

    css操作元素位置有以下几种方式:float.position.top等. I float part 1.浮动首先会先将元素在正常文档流中删除,父容器无法获取元素高度,但是该元素依然影响布局. 2.任 ...

  5. vue下超级滚动条perfect-scrollbar(在特定框架里使用一款并非为该框架定制的库/插件)

    点我查看

  6. Shell05--函数应用

    目录 Shell05---函数应用 1. 函数基本概述 2. 函数基本使用 3. 函数参数传递 4. 函数状态返回 5. 函数场景示例 Shell05---函数应用 1. 函数基本概述 01. 什么是 ...

  7. TCP和UDP的区别,以及它们对应的协议有哪些?

    TCP(传输控制协议) 是面向连接的协议.在收发数据前,一个TCP连接必须要经过“三次握手”建立可靠的连接.握手过程中传送的包里不包含数据,三次握手完毕后,客户端与服务器才正式开始传送数据.理想状态下 ...

  8. oracle的分析函数over

    参考地址:https://www.cnblogs.com/chinas/p/7058771.html?utm_source=itdadao&utm_medium=referral#_lab2_ ...

  9. MySQL MHA相关测试

    接上篇文章,介绍了如何安装mysql mha,地址如下:http://blog.csdn.net/yiyuf/article/details/40340895 下面接着进行mha的相关测试: SSH  ...

  10. java基础复习(三)

    一.运算符 1.算术运算符 1) 加法(+) 加法   正号  字符串拼接 2) 减法(-) 减法 负号 3) 乘法 (*) 乘法 4) 除法(/) 除法 整数(小数)相除的例子 10/3 =3:   ...