实现一个成果: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是在设置的固定宽高中依照属性显示图片成果,所占宽高不变。