<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. css3实现jquery mobile的页面过度原理

    1.两个页面在同一个html中用js点击实现另外一个页面增加ui-page-active slid in等各种效果,每个页面中是一个绝对定位 .ui-mobile [data-role=page] { ...

  2. ssm项目开发通用base模块和工具

    controller层日期转换通用类 package cn.itcast.jk.controller; import java.text.DateFormat; import java.text.Si ...

  3. string 与 char 的区别

    1.char是字符类型 2.string是字符串类型 虽然一字之差,但其本质是很大的. 1. char属于基础类型(C++),在C#中它属于值类型(Value Type).char类型的长度是固定的, ...

  4. C++基础学习-20120518

    1---------printf中的%f会自动转化成double 2---------static_cast的应用实际上static_cast真正用处并不在指针和引用上,而在基础类型和对象的转换上 s ...

  5. [sz,rz]使用sz/rz在两台Linux设备之间传输数据

    转自:https://superuser.com/questions/604055/using-rz-and-sz-under-linux-shell zsend #!/bin/sh DEV=/dev ...

  6. [Kernel]内核版本添加字符和内核版本'+'解决

    转自:http://blog.csdn.net/adaptiver/article/details/7225980 之前每次由于git仓库编译出来每次都带有'+', 导致都需要使用git archiv ...

  7. 怎么清除Win10运行中的使用记录,不记录win10的运行记录

    点击“开始”把上两项关闭.

  8. Win2008 Server系统安装打印服务器与配置

    原文:http://60808.org/thread-20259-1-1.html 视频地址:http://edu.51cto.com/lesson/id-20163.html 本文介绍的是在Win2 ...

  9. 轻量级ORM框架Dapper应用三：使用Dapper实现In操作

    IN 操作符允许我们在 WHERE 子句中规定多个值. 本篇文章中,还是使用和上篇文章中同样的实体类和数据库,Dapper使用in操作符的代码如下: using System; using Syste ...

  10. linux访问ftp服务器命令

    在linux访问时输入 用户名 anonymous 密码直接回车可以匿名登录 如果传输非文本,先输入bianry,然后再get就可以了 比如 ftp> get 5-4.tif 227 Enter ...