css 图片撑满盒子 自适应问题

Question

现在有一张图片500x700的图片，需要放到在一个div里， div的宽高没有图片的宽高这么大，要做到自适应，在电脑屏幕缩小时，图片也跟着缩小，做到适应，但是一下子卡住了，求大神们指点...

  <div class="box">
        <div class="son">
            <div class="son_img"></div>
        </div>
  </div>

.box{
    width: 100%;
    height: 100%;
    background: #e1e1e1;
    position: relative;
    }
    .son{
        height: 60%;
        width: 25%;
        border: 1px solid #000;
        top: 50%;
        left: 160px;
        transform: translateY(-50%);
        position: absolute;
        }
        .son_img{
            width: 100%;
            height: 100%;
            background-image: url('../images/1.png');
            background-size: cover;
            background-position: center;
        }
  

Answer 1

.son_img{
  background-size: 100% 100%;
}

另外建议这些比较大的图片最好用image标签

Answer 2

background-size需要放到background系列的最后写才会生效，另外background-size的属性及效果你要明白，然后设置为你想要的结果

Answer 3

cover和contain是图片不拉伸，不过依旧是以宽和高的一边为100%的比例缩放的，看你是要什么样的效果了，是依旧5:7还是你示例中的60:25（在你box的宽高比为1:1时）