css解决图片自适应，详情按宽展示问题

� ting

于 2021-11-17 16:16:56 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

文章标签： html javascript css

本文链接：https://blog.youkuaiyun.com/ztt8023/article/details/121380491

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
按此场景，仅应用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，运行查看，如有其他解决方案，期待来评~