<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. jQuery请求维基百科[历史上的今天]

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jQuery-File-Upload文件上传

    http://blueimp.github.io/jQuery-File-Upload/index.html

  3. LeetCode: Wildcard Matching 解题报告

    Wildcard MatchingImplement wildcard pattern matching with support for '?' and '*'. '?' Matches any s ...

  4. 影梭Android版使用教程

    影梭Android版使用教程  2015年5月13日  admin  影梭使用教程 下载影梭Android版客户端 安卓客户端下载:下载地址 安装并打开影梭 按下图说明设置服务器.远程端口.密码和加密 ...

  5. 使用 FreeRTOS 时注意事项总结（基础篇教程完结）

    以下转载自安富莱电子: http://forum.armfly.com/forum.php FreeRTOS 的初始化流程推荐的初始化流程如下,本教程配套的所有例子都是采用的这种形式,当然,不限制必须 ...

  6. 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼【转】

    摘要: 这篇文章给大家带来<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>,让我们一起来看看2013年的浏览器现状.浏览器厂商之间的竞争促使各大浏览器对 HTML5 和 CSS3 ...

  7. discuz论坛折腾记录

    1.邮箱验证 自带的是用php sendmail,好在可以用smtp 如果用企业邮箱,一般都是ssl,需要设置为,参考此帖 STMP服务器 - QQ 企业邮ssl://smtp.exmail.qq.c ...

  8. java方法——重载2

    什么是Java方法重载 方法重载的定义 1 对于同一个类,如果这个类里面有两个或者多个重名的方法,但是方法的参数个数.类型.顺序至少有一个不一样,这时候局构成方法重载. END 方法重载示例 1 pu ...

  9. linux挂载根文件系统过程

    linux-2.6.36内核 start       arch/arm/boot/compressed/head.S arch/arm/kernel/head.S start_kernel()    ...

  10. 支持向量机(SVM)（三）-- 最优间隔分类器（optimal margin classifier）

    在之前为了寻找最有分类器,我们提出了例如以下优化问题: 在这里我们能够把约束条件改写成例如以下: 首先我们看以下的图示: 非常显然我们能够看出实线是最大间隔超平面,如果×号的是正例,圆圈的是负例.在虚 ...