2023年6月21日发(作者：)
CSS图⽚固定长宽⽐实现⾼度⾃适应某些场景下图⽚的宽度不固定，为了保证图⽚不失真，需要通过固定长宽⽐的⽅式来动态计算图⽚⾼度应⽤场景1. 例如图⽚期望⼤⼩是 460 * 240 ，但真实图⽚可能出现如下情况1. 图⽚⼤⼩不固定2. 图⽚可能加载失败2. 在⼀个通过 panel 展现的列表中，由于浏览器可⼤可⼩，单个项⽬的宽度不固定3. 如果固定⾼度，会导致图⽚出现⽐例不协调的情况4. 如果不固定⾼度，会出现如下单个项⽬⾼度不⼀致的情况解决⽅式出现上述情况的代码1. 可以看出为了保证图⽚不失真，同时当浏览器⼤⼩变化时，单个项⽬能跟随⼀起动态变化，项⽬本⾝以及图⽚的容器没有设置硬性⾼度
展现的图⽚改为⽗容器的背景2. ⽗容器背景的布局⽅式设置为
background-position: center; 以及
background-size: cover;3. ⽗容器的 height 设置为 0 ，真实⾼度由 padding-top 填充1. 由于⾼度为 0 ，如果容器内部还存在其他⼦元素，则需要设置为
position: absolute2. ⼦元素为 absolute 的话，⽗容器则需要设置为
position: relative4. 关键点在于 padding-top 的值如何确定1. 前⾯说过图⽚的⽐例为 460 * 2402. 那么计算⽐例应该是
100 * 240 / 460 得出
52.173.
padding-top: 52.17% 则基本可以确保容器撑开的⼤⼩与图⽚正确⽐例⼀致
2023年6月21日发(作者：)
CSS图⽚固定长宽⽐实现⾼度⾃适应某些场景下图⽚的宽度不固定，为了保证图⽚不失真，需要通过固定长宽⽐的⽅式来动态计算图⽚⾼度应⽤场景1. 例如图⽚期望⼤⼩是 460 * 240 ，但真实图⽚可能出现如下情况1. 图⽚⼤⼩不固定2. 图⽚可能加载失败2. 在⼀个通过 panel 展现的列表中，由于浏览器可⼤可⼩，单个项⽬的宽度不固定3. 如果固定⾼度，会导致图⽚出现⽐例不协调的情况4. 如果不固定⾼度，会出现如下单个项⽬⾼度不⼀致的情况解决⽅式出现上述情况的代码1. 可以看出为了保证图⽚不失真，同时当浏览器⼤⼩变化时，单个项⽬能跟随⼀起动态变化，项⽬本⾝以及图⽚的容器没有设置硬性⾼度
展现的图⽚改为⽗容器的背景2. ⽗容器背景的布局⽅式设置为
background-position: center; 以及
background-size: cover;3. ⽗容器的 height 设置为 0 ，真实⾼度由 padding-top 填充1. 由于⾼度为 0 ，如果容器内部还存在其他⼦元素，则需要设置为
position: absolute2. ⼦元素为 absolute 的话，⽗容器则需要设置为
position: relative4. 关键点在于 padding-top 的值如何确定1. 前⾯说过图⽚的⽐例为 460 * 2402. 那么计算⽐例应该是
100 * 240 / 460 得出
52.173.
padding-top: 52.17% 则基本可以确保容器撑开的⼤⼩与图⽚正确⽐例⼀致
发布评论