如何设置html中img宽高相同-css
最近项目中有一个问题,做一个响应式的盒子,随着屏幕的变化,
宽高一直保持相等,之前一直使用js动态设置,获取盒子的宽度来设置盒子高度。
但是加载时样式显示不是很好,后来直接用css实现。
html部分:
css部分:
img-box为设置的正方形容器。
原文地址:https://segmentfault.com/q/1010000006850507?_ea=1151796
如何设置html中img宽高相同-css的更多相关文章
- canvas基础入门(一)canvas的width、height于css样式中的宽高区别
canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...
- 【IE6的疯狂之一】IE6中奇数宽高的BUG
IE6真是太疯狂了.今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还 ...
- android PercentRelativeLayout 支持百分比来设置控件的宽高
Android 最终官方支持按百分比来设置控件的宽高了. 我们先来看看效果: 看一下布局: PercentRelativeLayout <android.support.percen ...
- js中各种宽高
各种宽高 Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY ...
- 如何设置a标签的宽高,如何使a标签的文字垂直居中
通常情况下a标签是没有宽高的,设置 width 和 height 没有作用. 若要使用 width 和 height,需要把a标签转为块级元素,即:display:block|inline-block ...
- css中固定宽高div与不固定宽高div垂直居中的处理办法
固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...
- DOM中获取宽高、位置总结
原生JS 一.文档.窗口的宽高和位置 // 获取屏幕的宽高 window.screen.height | window.screen.width // 屏幕可用工作区宽高 window.screen. ...
- 第76天:jQuery中的宽高
Window对象和document对象的区别 1.window对象表示浏览器中打开的窗口 2.window对象可以省略,比如alert()也可以写成window.alert() Document对象是 ...
- 为什么canvas宽高要设置在标签内>>宽高设置在style和设置在canvas的区别
一直很困惑为什么canvas标签和其他标签不一样,宽高需要设置在canvas标签里,设置在style里就会有问题. 纯粹个人理解,有错误欢迎指出. > 结论写在头 设置在style里有问题其实是 ...
随机推荐
- CSS实现自适应不同大小屏幕的背景大图
在网上搜了好多demo:可总有这样那样的一些小瑕疵,试过几次后发现这样效果是最好的 html: <div class='bg'> <img src="image/bk02. ...
- BootStrap Table使用小结
1.在当前表格的最后新增数据 $("#data_module_table").bootstrapTable('append', data.data);//data.data---- ...
- TIBCO EMS安装部署
创建用户 groupadd -g 800 tibcouseradd -u 801 -g tibco -d /home/tibco/ -s /bin/bash tibco 目前关于sharedatast ...
- IT屌丝如何获取改变自己的真正内心动力
要想从现在的低薪(年薪10万以下)快读变成未来的高新(年薪30万以上)我们要做的就只有从自身改变开始! 人改变自己的勇气,朱啊哟取决于我们自己当前的痛苦程度!直到某一天真的回避不了了,才会被动的改变, ...
- Spring IOC容器分析(4) -- bean创建获取完整流程
上节探讨了Spring IOC容器中getBean方法,下面我们将自行编写测试用例,深入跟踪分析bean对象创建过程. 测试环境创建 测试示例代码如下: package org.springframe ...
- javaScript属性
------------------------------------行内样式------------------------------------ *基本标签html 网页的开始标记head 网 ...
- [转载] Rss 与 Feed 的概念区别
转载自http://www.chinaz.com/news/2011/0831/207961.shtml 可能很多刚刚接触博客的童鞋们,也和我一样不太了解:rss和feed概念或者说不了解rss和fe ...
- Python之函数返回多个值
#!/usr/bin/env python26 #-*- coding:utf-8-*- def test(): a = 10 b = 20 return a,b #返回一个元组 atuple= te ...
- 阿里Dubbo疯狂更新,关Spring Cloud什么事?
最近,开源社区发生了一件大事,那个全国 Java 开发者使用最广的开源服务框架 Dubbo 低调重启维护,并且 3 个月连续发布了 4 个维护版本. 我上次在写放弃Dubbo,选择最流行的Spring ...
- 常见的Mysql数据库优化总结
索引 1.主键索引 作用:唯一约束和提高查询速度 #建表时创建主键索引 create table `table_name`( `id` int unsigned not null auto_incre ...