CSS实现图片等比例缩放不变形

我是为了实现方形的图片,自适应屏幕比例,专门找这个功能找了很久。网上很多不靠谱的,靠谱的无非两种,一种是以vw,vh或者vmin来实现(vmin是取vh和vm中小的那个),这种方法没办法自适应padding;另外一种是通用式的解决方案,而且十分优美。

这个方案主要是通过3层div标签来实现,最外层card-container负责控制容器宽度,中间层card-wrap负责控制容器比例,最内层card-img负责让图片覆盖整个容器。

<div class="card-container">
    <div class="card-wrap">
        <img class="card-pic"  alt="">
    </div>
</div>
.card-container {
   width: 100%;
   padding: 15px 20px;
   margin: auto;
   box-sizing: border-box;
 }
 .card-wrap {
   width: 100%;
   height: 0;
   padding-bottom: 100%;
   position:relative;
 } 
 .card-pic {
     position: absolute;
     object-fit: cover;
     left: 0;
     top:0;
     width: 100%;
     height: 100%; 
 }

知识点:

1. padding的尺寸单位于width相同,也就是说100% padding的长度 = 100% width的长度。这样,通过将height设置为0,就可以通过card-wrap标签设置任意比例的div容器。如设置width=100%,padding-bottom=50%就可以得到2:1的容器,这个可以保证容器自适应且等比例。

2. position: absolute 是相对最近的position: relative 定位的。如果没有postion: relative标签,则会对body定位。因此只要将包裹标签设置position: relative,将最终图片设置 position: absolute,就可以讲图片覆盖容器。同时设置width100%, heith100%即可将图片铺满容器。

comments powered by Disqus