最近项目中有一个问题，做一个响应式的盒子，随着屏幕的变化，

宽高一直保持相等，之前一直使用js动态设置，获取盒子的宽度来设置盒子高度。

但是加载时样式显示不是很好，后来直接用css实现。

html部分：

css部分：

img-box为设置的正方形容器。

原文地址：https://segmentfault.com/q/1010000006850507?_ea=1151796

如何设置html中img宽高相同-css的更多相关文章

  1. canvas基础入门（一）canvas的width、height于css样式中的宽高区别

    canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...

  2. 【IE6的疯狂之一】IE6中奇数宽高的BUG

    IE6真是太疯狂了.今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还 ...

  3. android PercentRelativeLayout 支持百分比来设置控件的宽高

    Android 最终官方支持按百分比来设置控件的宽高了. 我们先来看看效果:       看一下布局: PercentRelativeLayout <android.support.percen ...

  4. js中各种宽高

    各种宽高 Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY ...

  5. 如何设置a标签的宽高，如何使a标签的文字垂直居中

    通常情况下a标签是没有宽高的,设置 width 和 height 没有作用. 若要使用 width 和 height,需要把a标签转为块级元素,即:display:block|inline-block ...

  6. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  7. DOM中获取宽高、位置总结

    原生JS 一.文档.窗口的宽高和位置 // 获取屏幕的宽高 window.screen.height | window.screen.width // 屏幕可用工作区宽高 window.screen. ...

  8. 第76天：jQuery中的宽高

    Window对象和document对象的区别 1.window对象表示浏览器中打开的窗口 2.window对象可以省略,比如alert()也可以写成window.alert() Document对象是 ...

  9. 为什么canvas宽高要设置在标签内>>宽高设置在style和设置在canvas的区别

    一直很困惑为什么canvas标签和其他标签不一样,宽高需要设置在canvas标签里,设置在style里就会有问题. 纯粹个人理解,有错误欢迎指出. > 结论写在头 设置在style里有问题其实是 ...

随机推荐

  1. You can Solve a Geometry Problem too（判断两线段是否相交）

    You can Solve a Geometry Problem too Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/3 ...

  2. Codeforces 376C. Socks

    C. Socks time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  3. 反馈法学习设计模式(一)——策略模式Strategy Pattern

    简介(Introduction) 之前学习Java8实战时,遇到一个很好的策略模式示例.便想着借着这个示例结合反馈式的方法来,学习策略设计模式,也以便后面反复琢磨学习. 首先我们通过练习,逐步写出符合 ...

  4. 0_Simple__matrixMulDrv

    使用CUDA的 Driver API 来计算矩阵乘法. ▶ 源代码: #include <stdio.h> #include <cuda.h> #include <bui ...

  5. AngularJS学习篇（十五）

    AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular. ...

  6. 谈谈HTTP/2对前端的影响【转载】

    原文:http://www.peep-squirrel.com/itcontent-2500617.html 随着 HTTP/2 规范的确认,以及主流浏览器(Chrome.Firefox.IE11)对 ...

  7. JAVA中文乱码之解决方案

    1.解决HTML页面的中文问题:为了使HTML页面很好的支持中文,在每个HTML页面的<head>标签内部增加(创建HTML页面自带) <head> <meta char ...

  8. C#实现将输入的数自动转换为科学计数法

    一朋友写了一个把输入的整型或浮点数转换为科学计数法表示的算法,写好后叫我去帮他看看有没有什么bug之类的没有考虑周全.我还没有细看就已经把我吓到了----整整写了将近三百行代码.我也没说他什么,只是回 ...

  9. Kotlin编码----var和val的区别

    var是一个可变变量,这是一个可以通过重新分配来更改为另一个值的变量.这种声明变量的方式和Java中常规的变量的声明方式一样. val是一个只读变量,这种声明变量的方式相当于java中的final变量 ...

  10. java操作solr实现查询功能

    一.封装的查询方法 /** * solr查询方法 * @param client solr客户端 * @param query solr查询对象 * @return list集合 * @throws ...