图片父元素div宽度异常问题

实现一个效果：div A宽度250px,高度100px，div B中有五张宽高皆为100px的图片并排，五张图片在A中从左至右展示，展示完最后一张图片然后再从右至左循环动画展示。
如：

问题：B宽度应为500px，但是显示的是父元素的250px，设置B宽度为500px，显示设置成功，但是展示还是显示250px。（导致动画展示有问题）

结果：img设置了max-width: 100%;导致B宽度异常。

勾掉这个属性就显示正常了：

结论：max-width: 100%;max-height: 100%;一般配合使用。用途：为了不让图片被放大后失真我们可以设置img的最大宽度为自身尺寸大小，更通俗的讲就是保持宽高比，在设置的宽高范围内，只允许缩小不允许放大img，在范围内宽高保持比的最大值即为该图片最终宽高的值。
拓展：object-fit是在设置的固定宽高中按照属性显示图片效果，所占宽高不变。