<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. Modbus 通讯协议

    摘要 工业控制已从单机控制走向集中监控.集散控制,如今已进入网络时代,工业控制器连网也为网络管理提供了方便.Modbus就是工业控制器的网络协议中的一种. 关键词 Modbus协议,串行通信,LRC校 ...

  2. Windows2012R2版本区别

    From:https://zh.wikipedia.org/wiki/Windows_Server_2012 Windows Server 2012有4种版本:Foundation, Essentia ...

  3. js求n行m列二维数组对角线元素之和的思路

    window.onload=function(){   var arr =  [[1,2,4],[5,6,7],[8,9,10]];   var i =3,j=3;   var result1=0,r ...

  4. ID、Class和标签选择器优先级

    按一般论:ID > Class > 标签 1.如以下样式: <div id="id" class="class">选择器优先权</ ...

  5. jsonp爬取页面

    jsonp Connection conn = Jsoup.connect("http://ip.taobao.com/service/getIpInfo.php?ip=" + i ...

  6. 存储过程中得到新增数据的ID

    数据库中有自增字段UID 存储过程如下: CREATE     PROCEDURE   AddUser   (   @Username           nvarchar(50),   @Email ...

  7. [systemd]How To Use Systemctl to Manage Systemd Services and Units

    转自: https://www.digitalocean.com/community/tutorials/how-to-use-systemctl-to-manage-systemd-services ...

  8. [shell]shell脚本统计数值大小

    #! /bin/bash array=( ... ) var1= var2= ;i<=;i++)); do array[i]="$( cat /sys/bus/iio/devices/ ...

  9. Dropwizard与Spring Boot比较

    在这篇文章中我们将讨论的Java轻量级框架Dropwizard和Spring Boot的相似性和差异. 首先,这是一个选择自由和速度需要,无论你在Dropwizard和Spring Boot选择哪个, ...

  10. CentOS5.4安装redmine详细步骤

    >>>>概述<<<< 这里不解释什么是redmine及用来做什么,如果不知道用来做什么,估计也不会把它安装到CentOS5.4上.哈哈…… 以下为详细的 ...