skyADMIN

CSS小trick 响应式正方形图片

我有一张图片,它可能不是正方形的,但是我希望它以正方形显示,但是不能出现变形的拉伸,可以被隐藏一部分。比较简单的一个做法就是用一个div包起来,给div设定宽高固定为一个正方形,然后overflow:hidden,图片宽度设为100%。

但是现在的问题是,bootstrap等响应式框架里,栅格结构下,我不能固定设定一个宽度,宽度是百分比的,所以高度和宽度相等就不是那么容易做到的。

搜了一下,有提到padding的百分比计算法是根据父元素的宽度来算的。所以可以在col-*元素下用一个div设置其宽度为100%,padding-bottom:100%。但是现在这个div虽然是正方形了,但是一旦往里面加入东西,还是会被撑成长方形,要放下图片怎么做呢?再套一个div,设置为绝对布局,宽度100%,用这个不占空间的div去包裹img标签。对了,这里需要把父级div的布局设为relative。

放个demo吧(这里我把css写进html省点空间,这个东西放进col-*下即可看到效果):

<div style="float: left;width: 100%;padding-bottom: 100%;height: 0;position: relative;">
  <div style="position: absolute;width: 100%">
     <img style="" src="在这里写图片url" alt="">
  </div>
</div>

 

码字很辛苦,转载请注明来自环宇博客《CSS小trick 响应式正方形图片》

评论