<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. JVM中类加载器的父委托机制

    类加载器 类加载器用来把类加载到Java虚拟机中. 类加载器的类型 有两种类型的类加载器: 1.JVM自带的加载器: 根类加载器(Bootstrap) 扩展类加载器(Extension) 系统类加载器 ...

  2. LeetCode Array Easy 448. Find All Numbers Disappeared in an Array

    Description Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear ...

  3. 八核浮点型DSP的双千兆网接口设计方案

    千兆网络接口具有数据传输速率快.连接方便.可以即插即用的优点,使得其应用较为广泛.随着电子技术和处理器的发展,很多应用场合的数据通信速率超过千兆网口的实际传输速率.例如,在A/D采样中,需要直接存储A ...

  4. MySQL06-- mysql索引

    目录 一.索引介绍 1.什么是索引 2.索引类型介绍 3.索引管理 5.索引操作 6.前缀索引 7.联合索引 8.创建索引总结: 一.索引介绍 1.什么是索引 1)索引就好比一本书的目录,它能让你更快 ...

  5. Sass--传一个不带值的参数

    Sass 的混合宏有一个强大的功能,可以传参,那么在 Sass 中传参主要有以下几种情形: A) 传一个不带值的参数 在混合宏中,可以传一个不带任何值的参数,比如: @mixin border-rad ...

  6. java 字符串获取

    package java07; /* String 当中与获取相关的常用方法 public int length(); 获取字符串当中含有的字符的个数,得到字符串的长度 public String c ...

  7. Nginx环境部署

    下载Nginx wget nginx.tar.gz http://nginx.org/download/nginx-1.17.1.tar.gz 解压源码 tar -zxvf nginx-1.17.1. ...

  8. windows命令行运行mysql

    在cmd中输入时一定要保证英文环境. 1. windows命令行运行mysql: 我是将MYSQL安装在C:\Program Files\MySQL所以 C:\Program Files\MySQL\ ...

  9. better-scroll 的使用

    1.安装 cnpm install better-scroll --save 2.引入 import BScroll from "better-scroll"; 3.初始化 dat ...

  10. Raspbian 在虚拟机上运行,运行Flask,供宿主机访问

    Raspbian 在虚拟机上运行,启动Flask,供宿主机访问 参考ref 1, 在virtualbox上跑起来Raspbian OS 参考ref 2, 在Raspbian上安装并运行Falsk, 注 ...