首页 > web前端 > css教程 > 怎样用CSS使图片高度自动缩放比例

怎样用CSS使图片高度自动缩放比例

php中世界最好的语言
发布: 2017-11-28 11:21:07
原创
3339 人浏览过

我们知道,在瀑布流这类的图片列表布局中常常可以看到用CSS控制DIV里的图片宽度高度,其实这样的布局很简单,今天就给大家详细讲解一下。

当遇到这样的DIV CSS布局时候,其实非常简单,我们只需要对图片宽度进行控制,而图片高度不用设置即图片高度会自动适应缩放比例(不设置高度即高度值默认为auto自适应)。

如上图,加入一个CSS命名为“.imgbox”的DIV盒子里图片宽度为252px,这个时候对应如何写CSS让对象里图片高度自动根据宽度缩放比例:

.imgbox img{width:252px} 

就这样简单CSS选择器即可控制DIV盒子“.imgbox”里图片宽度,而没有设置CSS高度(height)样式,这样默认图片就会自适应宽度等比例缩放了。

小结:

对于新手来说,可能忘记了宽度、高度如果不设置默认是自适应这一特性,所以可能遇到设置图片宽度,就想一定要给予设置高度这样的固化思维。其实在CSS布局中图片宽度固定、高度自适应这种要求情况下,CSS只需设置宽度值,高度就不用添加设置即可达到想要布局效果。

在布局中如果图片高度和宽度都是固定不变的,无论图片多大什么比例,布局的图片宽度高度是固定的,这种情况下就需要同时对图片设置固定宽度和高度值。

相信看了这些解析你已经掌握了方法,更多精彩请关注php中文网其它相关文章!


相关阅读:

怎样让DIV自适应高度

在HTML里用CSS隐藏div的方法

详解前端响应式布局、响应式图片,与自制栅格系统

以上是怎样用CSS使图片高度自动缩放比例的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板