
按此场景,仅应用css我们无法知道image的宽度;虽然也可用js计算图片的宽度,再去给Description赋宽度值,但card数据量大的情况下,获取来的数据,每个都要计算,很消耗性能,最好是应用css解决此类问题,如下提供了css写法:
.card{
.img {
height: 150px;
}
imageDes{
width: 0;
min-width: 100%;
.size,.name {
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
如下效果:

可以点击下载 test.html,运行查看,如有其他解决方案,期待来评~
博客介绍了如何使用CSS解决图片在不同场景下按宽度自适应展示的问题,强调避免使用JavaScript进行宽度计算以提高性能。提供了一个css实现的示例,并鼓励读者下载test.html文件进行验证和分享其他解决方案。
1460

被折叠的 条评论
为什么被折叠?



