<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. How do I iterate over a Scala List (or more generally, a sequence) using theforeach method or for loop?

    Scala List/sequence FAQ: How do I iterate over a Scala List (or more generally, a sequence) using th ...

  2. ubuntu下超强的截图工具scrot

    Scrot ,是一个命令行下使用的截图工具,支持全屏.窗口.选取.多设备.缩略图.延时,甚至可以截图完毕之后指定某程序打开截好的图片. 终端安装:     sudo apt-get install s ...

  3. oracle相关链接

    shilei1的个人空间 http://blog.itpub.net/196700/

  4. 【转载】用Pwnage + Redsnow 制作完美越狱固件

    [转载] 现在貌似IOS 7.X系 大行其道,就算不是IOS7.X ,很多人也装着IOS 6.X系. 进入正文前首先介绍一下自己的装备 设备:iphone4 GSM 大陆行货 (内部版本3,1) 为什 ...

  5. 关于django模型里面的__str__和__unicode

    简而言之,就是__str__和__unicode__都是为了再管理站点中加载这个表时想显示什么属性,当然一般都是显示一个name,大体来讲是通用的.下面是抄的csdn上面的一篇文章. str()是Py ...

  6. JAVA-JAVA、JavaScript、JavaWeb的关系

    相关资料:1.http://www.cnblogs.com/youring2/archive/2013/06/06/3120645.html2.https://jingyan.baidu.com/ar ...

  7. python基础系列教程——Python中的编码问题，中文乱码问题

    python基础系列教程——Python中的编码问题,中文乱码问题 如果不声明编码,则中文会报错,即使是注释也会报错. # -*- coding: UTF-8 -*- 或者 #coding=utf-8 ...

  8. 关于使用samba用户的权限设置

    首先要保证你的samba安装并配置好,关于安装和配置samba请参考此文章http://blog.csdn.net/linglongwunv/archive/2010/01/19/5212875.as ...

  9. u-boot 2016.05 添加自己的board 以及config.h

    拿到一个uboot 后,我都想添加一个属于自己的board文件以及include/configs/*.h 文件. 如何添加这个些文件,今天来记录一下. 复制一份你所参考的板级文件,比如说board/v ...

  10. oracle sql生成日历表

    以下是生成2017年日历表: insert into dw_mdl.m_hadp_dim_date select to_char(everyDay,'yyyy-mm-dd') as dt, to_ch ...