关于css:图片父元素div宽度异常问题

42次阅读

共计 389 个字符,预计需要花费 1 分钟才能阅读完成。

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

正文完
 0