css来控制img正方形自适应

abcd232110个月前前端开发678

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

实现方法很多,其中简洁的方法就是直接在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框内

相关文章

iframe背景透明设置方法

iframe的背景颜色在IE下为window的当前窗口颜色(默认白色,可以在显示外观处对其进行设置),这导致在大幅背景上插入iframe时,需要给它“透底”,可是IE不支持对iframe设置背景色,那...

CSS字体font-family的正确选择方案

本文主要介绍的是CSS字体font-family的正确选择方案,由于设计稿和平台的不同,导致了制作有时候无法还原设计稿,理清各种平台字体区别,有助于做出最好的选择。大家都知道,在不同操作系统、不同游览...

滚动条触动css动画效果——scrollreveal.js

滚动条触动css动画效果——scrollreveal.js

和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollR...

取消chrome浏览器下input和textarea的默认样式

chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动textarea还会使页面布局错乱,所...

JQ获取浏览器宽度,根据不同宽度给div赋值

var winWidth = $(window).width();     var winHeight =$...

移动端自适应Rem自适应js

    当我们指定一个元素的font-size为2rem的时候,也就说这个元素的字体大小为根元素<html>字体大小的两倍,如果html的font-size为12p...

发表评论    

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