<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. c# UDP分包发送

    考虑到UDP的高速和其他协议的复杂性,做了一个依靠时间发送的分包组包重发的UDP库. https://github.com/jinyuttt/UDPTTL.git

  2. elasticsearch 基础 —— 索引、更新文档

    索引文档 通过使用 index API ,文档可以被 索引 -- 存储和使文档可被搜索 . 但是首先,我们要确定文档的位置.正如我们刚刚讨论的,一个文档的 _index . _type 和 _id 唯 ...

  3. 天启android5.1系统无法在非1650批次号的rk3288w芯片上启动

    天启android5.1系统无法在非1650批次号的rk3288w芯片上启动 挂掉log,说明在rtc初始化后挂掉 [ ) HIGH! ======== [ [ [ 1.420258] [WLAN_R ...

  4. Linux使用rarcrack暴力破解RAR,ZIP,7Z压缩包

    1.下载http://rarcrack.sourceforge.net/ 2.安装依赖 gcc libxml2-devel  libxslt-devel 3.使用rarcrack your_encry ...

  5. Center OS 7

    1:关闭防火墙 systemctl stop iptables.service 2:禁止开启启动 systemctl disable firewalld.service 3:查看防火墙 firewal ...

  6. Jmeter —— Test Fragment (测试片段)

    Test Fragment(测试片段) 1.    概念 JMeter中的Test Fragent:是控制器上一种特殊的线程组:它在测试树上与线程组处于同一个层级.但是使用的时候需要和Include ...

  7. AGC002[BCDEF]题解

    F是计数于是就做(kan ti jie)了= = B - Box and Ball 模拟一下 每个盒子开一个d表示有的球数 可能存在红球的打个标记 传递一下就行了 #include<cstdio ...

  8. 洛谷P4331[BOI2004] sequence

    博客复活? 这个题很模板啊.随便上个左偏树.之前第一遍写对了.然后今天翻出来又写了一遍发现了一个奇奇怪怪的问题. 对比如下 上面的是AC 下面的WA 真的是一个很蠢的问题...你TM堆顶都弹出来了,堆 ...

  9. ASIO

    { 编译ASIO库时,出现编译警告, "Please define _WIN32_WINNT or _WIN32_WINDOWS appropriately. For example:\n& ...

  10. android智能手机如何查看APK包名

    工具/原料   智能手机一部 USB线一根 方法/步骤   1 首先.使用USB线,将电脑和手机连起来.注意.手机的USB调试默认需要打开,如下图所示. 2 然后启动电脑端的cmd应用,进入dos界面 ...