第 35 期(W3C 标准-CSS-布局排版)：图片等比缩放匹配父容器尺寸 #38
Description
题目：
请使用纯 CSS 实现图片等比缩放最大化匹配父容器尺寸的效果：使下面的图片自适应填充父容器尺寸，同时保持宽高比。
要求：
- 图片不能变形
- 图片不能被剪裁
- 图片不能溢出父容器
效果图：
.box {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #ccc;
}<div class="box">
<img src="https://fezaoduke.github.io/fe-practice-hard/assets/pics/cartoon.png">
</div>参考答案：
.box > img {
width: 100%;
height: 100%;
object-fit: contain;
}拓展阅读：object-fit