我们知道，在瀑布流这类的图片列表布局中常常可以看到用css控制div里的图片宽度高度，其实这样的布局很简单，今天就给大家详细讲解一下。
当遇到这样的DIV CSS布局时候，其实非常简单，我们只需要对图片宽度进行控制，而图片高度不用设置即图片高度会自动适应缩放比例（不设置高度即高度值默认为auto自适应）。
如上图，加入一个CSS命名为“.imgbox”的DIV盒子里图片宽度为252px,这个时候对应如何写CSS让对象里图片高度自动根据宽度缩放比例：
.imgbox img{width:252px}
就这样简单CSS选择器即可控制DIV盒子“.imgbox”里图片宽度，而没有设置CSS高度（height）样式，这样默认图片就会自适应宽度等比例缩放了。
立即学习“前端免费学习笔记（深入）”；
小结：
对于新手来说，可能忘记了宽度、高度如果不设置默认是自适应这一特性，所以可能遇到设置图片宽度，就想一定要给予设置高度这样的固化思维。其实在CSS布局中图片宽度固定、高度自适应这种要求情况下，CSS只需设置宽度值，高度就不用添加设置即可达到想要布局效果。
在布局中如果图片高度和宽度都是固定不变的，无论图片多大什么比例，布局的图片宽度高度是固定的，这种情况下就需要同时对图片设置固定宽度和高度值。
相信看了这些解析你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
以上就是怎样用CSS使图片高度自动缩放比例的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
789
