css来控制img正方形自适应

abcd23212年前 (2024-10-31)前端开发1023

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

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

返回列表

透明度参照表：00%=FF（不透明） 5%=F2 10%=E5 15%=D8 20%=CC 25%=BF 30%=B2 35%=A5 40%=99 45%=8c 50%=7F 55%=72 60%=6...

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

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

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

1. 在你的点击事件中加上一个判断，假设产生动画效果目标的是div这个节点，那么你要加上这个判断它会确保你的动画只会在上一个动画结束后才能产生，可以保持动画的完整性，但是连续点击时会有反映迟钝的感...

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

潮人街