前端图片自适应大小问题

一个盒子（红色）里面有一个图片（绿色），我要怎么设置CSS，才能让不管后端传过来的图片是什么尺寸，都让这个图片在绿色的盒子里显示。

结构：

<el-link :underline="false"
                           :href=item.url
                          class="link-box">
                    <el-image :src="item.backgroundUrl"
                              fit="cover" class="link-img"></el-image>
                    <div>{{item.name}}</div>
                  </el-link>

可以给父元素设置固定宽高，然后给图片设置

width:100%;
height:100%;

这样不管图片多大，都会以父元素的大小显示的；

图片不拉伸的话
给父元素宽高
图片：
{
max-height: 100%;
max-width: 100%;
}