<div class="image-header">

<img src="demo.jpg">

</div>

.image-header{

position:relative

width:%

height:

padding-top:%

}

.image-header img{

position:absolute

top:

left:

width:%

height:%

}

最终图片以正方形显示

css图片宽高相等设置的更多相关文章

  1. 前端之css（宽高）设置小技巧

    一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...

  2. css图片热点链接的设置

    一.热点的原理 图片通过usemap="#Map"属性将名称为"Map"的热点区域及连接映射到图片上. 一般来说,图片的usermap属性对应的是map热点的n ...

  3. CSS中对图片(background)的一些设置心得总结

    写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...

  4. ios UIWebView加载HTMLStr图文，关于图片宽高设置，webView内容实际高度的踩坑问题

    一.关于UIWebView 与 WKWebView 选取问题 从发布时间看: 2008年7月11日,在新一代iPhone3G正式发售当天,iPhone OS 2.0(iOS 2.0)推出,这时候就有U ...

  5. css图片根据div宽高比例自适应

    1.div布局 <div class="card-img-show"> <div class="upload-img-conss" > ...

  6. js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  7. css+background实现 图片宽高自适应，拉伸裁剪不变形

    图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性.  下面咱们在网上找两张宽高不一样的照片:     No.1                                      ...

  8. CSS图片下面产生间隙的6种解决方案

    CSS图片下面产生间隙的6种解决方案 在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是 ...

  9. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

随机推荐

  1. dwz 取不到 form中的值

    在使用dwz的时候,出现的一个问题, <li style=" width:160px;"> <label style=" width:60px;&quo ...

  2. sqllite 试图加载格式不正确的程序。 (异常来自 HRESULT:0x8007000B)

    试图加载格式不正确的程序. (异常来自 HRESULT:0x8007000B) 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细 ...

  3. Oracle update 日期

    UPDATE Sf_Msg_Monthly SET smm_Closed_Time = to_date('2011-12-30 11:54:30','yyyy-MM-dd HH24:MI:SS') ;

  4. LeetCode: Regular Expression Matching 解题报告

    Roman to IntegerGiven a roman numeral, convert it to an integer. Input is guaranteed to be within th ...

  5. const在c和c++中地位不同

    先测试C语言的const: #include<stdio.h> int main() { ; //等价于 //int const a = 10; //a = 11;//err ; cons ...

  6. ffmpeg 批量转换swf为mp3

    下了几个音乐居然都是swf格式,在网上找了一下没找到好用的转换工具,于是想到了ffmpeg. linux下可以直接安装ffmpeg #/bin/sh for f in *.swf do ffmpeg ...

  7. Disable Maven Nature和disable workspace resolution

    1.Disable Maven Nature myeclipse更新maven的时候,手抖了一下,点上了Disable Maven Nature,然后工程右键菜单中的Maven栏就不见了! 其实这是把 ...

  8. java中的访问控制符

    首先来一张图: 对于一个类而言访问控制符只有一个public和默认无修饰符.其他的几个访问修饰符对于变量和方法都可以使用. 下面介绍具体的使用. 1. 公有访问控制符(public) Java的类是通 ...

  9. C语言 · 提货单（P1101）

    算法训练 P1101   时间限制:1.0s   内存限制:256.0MB      有一份提货单,其数据项目有:商品名(MC).单价(DJ).数量(SL).定义一个结构体prut,其成员是上面的三项 ...

  10. mysql按年度、季度、月度、周、日统计查询的sql语句

    本文介绍一些mysql中用于查询的sql语句,包括按年度.季度.月度.周.日统计查询等,有需要的朋友,可以参考下. 一.年度查询 查询 本年度的数据   SELECT * FROM blog_arti ...