为什么移除car-back类后图片拉伸失效，id为image的父元素样式不生效？

核心原理说明 #

父元素设置的宽高样式不会自动被子元素继承，<img>作为替换元素本身也没有默认铺满父容器的特性，具体逻辑如下：

• 你给#image容器设置的width: 100%、height: 100%仅作用于div本身，让这个固定定位的容器铺满整个浏览器视口，这个样式规则不会自动传递给内部的子元素。
• <img>属于浏览器内置的替换元素，默认尺寸由图片源文件的原始宽高决定，如果你不主动给它设置宽高，哪怕父容器已经铺满全屏，它也只会按照原始大小渲染，不会自动适配父容器尺寸。
• .car-back类的作用就是给<img>本身也设置width: 100%、height: 100%，此时百分比宽高会基于父容器#image的尺寸计算，最终让图片和父容器一样铺满视口，达到你要的拉伸效果。

小优化提示：如果不希望图片拉伸变形，可以在.car-back类里增加object-fit: cover规则，会在保持图片比例的前提下铺满容器，多余部分自动裁剪。

内容的提问来源于stack exchange，提问作者Austin Claude