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

宽高一直保持相等，之前一直使用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. AngularJS学习篇（十一）

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

  2. Java--Socket通信（双向）

    新建两个工程,一个客户端,一个服务端,先启动服务端再启动客户端两个工程的读写操作线程类基本上完全相同 服务端: import java.io.BufferedReader; import java.i ...

  3. robotframework自动化系列：修改流程

    在上一小节中,新增流程操作已经完成.那么接下来就是修改的流程操作了,对于一个页面的修改如何操作呢? 针对修改修改操作是在一个已经存在的账号直接修改还是新添加一个账号再修改呢?从用例设计健壮性出发,我们 ...

  4. 文本域、bootstrap-table显示以及MySQL三者间的换行符问题

    首先,今天在做项目的时候遇到的一个问题,如何实现文本输入换行以及在前台Bootstrap-table中显示也能够换行. 也许你马上就会想到说,用富文本编辑器,然而我们需要实现的只是文本输入以及换行功能 ...

  5. SmartAdmin（SmartAdmin_v1.5.2）

    SmartAdmin_v1.5.2是一个基于bootstrap上开发的页面设置,前后台数据交互和样式显示. 用过的例子有F:\SmartAdmin_v1.5.2\SmartAdmin_v1.5.2\D ...

  6. CodeRush Xpress的菜单在VS2008SP1中不显示的解决方法

    将HKEY_LOCAL_MACHINE\SOFTWARE\Developer Express\CodeRush for VS\9.1中的HideMenu设置为0.若HideMenu不存在就创建个DWO ...

  7. [转载] gitbook安装与使用

    转载自http://blog.csdn.net/xiaocainiaoshangxiao/article/details/46882921 废话不说,直接主题: gitbook安装 ========= ...

  8. linux如何查看端口被谁占用

    1.查看端口是否被占用 [guosong@alice48 main]$ netstat -nlp|grep 6184 (Not all processes could be identified, n ...

  9. pandas选择数据-【老鱼学pandas】

    选择列 根据列名来选择某列的数据 import pandas as pd import numpy as np dates = pd.date_range("2017-01-08" ...

  10. 打字机效果-so easy

    html <p> <span>有了梦想,我们的心有了飞翔:有了飞翔,我们的梦想不再遥远......</span> </p> js $(function( ...