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

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

    A - Max Sum Plus Plus Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I6 ...

  2. java爬虫--jsoup简单的表单抓取案例

    分析需求: 某农产品网站的农产品价格抓取 网站链接:点击打开链接 页面展示如上: 标签展示如上: 分析发现每日价格行情包括了蔬菜,水果,肉等所有的信息,所以直接抓每日行情的内容就可以实现抓取全部数据. ...

  3. PHPMailer 发送邮件(二)

    发现PHPMailer又做了较大的更新,以前发送邮件的方法已不太适用,刚好要做一个实验,需要搭建个环境,这里使用Gmail进行测试,现记录下来. 传送地址Github: PHPMailer 基本要求的 ...

  4. 3.Apache ZooKeeper数据模型

    1. ZooKeeper自下向上的服务视图 Apache ZooKeeper是分布式应用程序的协调服务. 它旨在解决分布式应用程序中与组件协调相关的棘手问题. 它通过暴露一个简单而强大的接口来实现这一 ...

  5. Hibernate开发文档

    hibernate配置 映射约束文件 <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3. ...

  6. windows系统扩展C盘的工具推荐（解决了C盘和压缩卷不相邻无法扩展C盘问题）

    1.下载分区工具 “分区助手3.0中文版” 下载地址:http://www.33lc.com/soft/14880.html 2.下载下来是一个压缩包,解压后运行安装程序. 3.安装完成后按以下步骤执 ...

  7. MSSQL 常用操作

    0.GUID去除横线和变换为小写 SELECT LOWER(REPLACE(LTRIM(NEWID()),'-','')) 1.IDENTITY 函数说明 IDENTITY ( data_type [ ...

  8. Python之mysql数据库更新表数据接口实现

    昨天,因为项目需求要添加表的更新接口,来存储预测模型训练的数据. 先码为敬~~~~~~~ # -*- coding: utf-8 -*- import pymysql import settings ...

  9. COBBLER无人值守安装

    cobbler-自动安装系统 1.1 cobber简介 1.1.1 cobbler说明 Cobbler是一个Linux服务器安装的服务,可以通过网络启动(PXE)的方式来快速安装.重装物理服务器和虚拟 ...

  10. 如何开发一个chrome扩展

    chrome是一个不错的浏览器,web开发者工作中一般都会使用chrome做为默认浏览器,它有很多扩展,给浏览器补充了各种功能,增强了用户体验.chrome具体能干什么?怎么做出来的呢? chrome ...