图片高度难以控制?巧用max-width轻松解决图片占位难题!
网页设计中,我们经常使用padding-bottom为图片预留空间。但如果图片高度过大,padding-bottom占位也会过大,导致图片显示不完整。虽然可以使用max-height: 100vh来限制图片尺寸,但这又可能导致padding-bottom百分比与max-height不匹配。
如何优雅地解决这个问题?
很简单!为图片设置max-width: 100%即可。这能确保图片宽度不会超过其容器。 如果需要限制图片外层容器的最大宽度,也可以根据实际情况设置。 这样一来,就不再需要额外设置高度相关的属性了。










