css来控制img正方形自适应

abcd23211年前前端开发891

该方法主要用来做网站自适应的,同时可以实现撑起内容高度。

实现方法很多,其中简洁的方法就是直接在img的父元素上加padding-bottom

<div class="img-box">
	<img src="123.jpg"/>
</div>
.img-box{
	padding-bottom:100%;
}
.img-box img{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	margin:auto;
}


.img-box img里的宽度100%,高度100%就可以填满整个正方形框,如果都不填则自动水平居中和垂直居中div框内

相关文章

a标签的为空链接和返回上一页的设置方法

a标签中的href值是一个地址,指示点击这个标签时,转向的地址。但是当使用a标签来做按钮,不需要跳转时,href值即为空。 我们需要使用以下两种方式:...

PHP实现将textarea的值根据回车换行拆分至数组

textarea回车换行为 \r\n$keyword_list = trim($_REQUEST['keywords']); $keyword_arr ...

flex布局设置单个子元素靠右

父元素设置了flex 布局display: flex; align-items: center;如何让某个子元素靠右呢?方法一flex: 1; text-a...

CSS之文本两端对齐

CSS之文本两端对齐

说起text-align,大家一定都不觉得陌生,我们常用关键字left、right、center实现行内元素相对父元素左、右、居中对齐,当然我们也使用justify来实现文本两端对齐。如上图,两端对齐...

CSS实现单行、多行文本溢出显示省略号(…

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;...

kindeditor编辑器插入mp4视频不显示及不过滤video的方法

传视频是单独做了htm5的video调用,所以在电脑及移动设备上访问没问题,但是很多地方比如题目,题目解析等都在kindeditor编辑器里面添加的,因为肯定要添加图文,但是添加视频的话,因为kind...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。