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

宽高一直保持相等，之前一直使用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. Cycling

    Cycling Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  2. Codeforces Round #378 (Div. 2)-C. Epidemic in Monstropolis

    C. Epidemic in Monstropolis time limit per test 1 second memory limit per test 256 megabytes input s ...

  3. AngularJS学习篇（十一）

    AngularJS 表格 ng-repeat 指令可以完美的显示表格. <!DOCTYPE html> <html> <head> <meta charset ...

  4. Redis的使用初探

    Redis Redis将其数据库完全保存在内存中,仅使用磁盘进行持久化. 与其它键值数据存储相比,Redis有一组相对丰富的数据类型. Redis可以将数据复制到任意数量的从机中 Redis的安装 官 ...

  5. ThreadLocal 原理解析

    1.对Thread local 理解 ThreadLocal 是为了解决线程间同步而创建的一个新的思路.简单来说就是每个线程都保存一个变量副本. 如果在Thread 内部定义一个field变量,也可以 ...

  6. riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期

    前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...

  7. Javascript parseFloat、parseDouble类型转换，数值加减，四舍五入

    <script language="JavaScript">var a = "0.11";var b = "0.2801";va ...

  8. QT制作窗口切换的小程序

    前言:本次实验是在三个窗口之间自由切换,窗口中播放gif格式的动态图. 让我们先来看看使用到的主要的函数: 一.播放gif格式动态图的函数 QMovie *movie = new QMovie(&qu ...

  9. Spring Security 4 新增特性

    1.概述 a) 特性 以下是Spring Security 4.0的新特性 Web Socket 支持 测试支持 整合Spring Data CSRF令牌参数解析 更安全的默认设置 role权限不再必 ...

  10. javascript函数式编程（一）

    一.引言 javascript函数式编程在最近两年来频繁的出现在大众的视野,越来越多的框架(react,angular,vue等)标榜自己使用了函数式编程的特性,好像一旦跟函数式编程沾边,就很高大上一 ...