网站地图    收藏   

主页 > 前端 > css教程 >

CSS控制DIV里图片的宽度固定 而高度自动缩放比例

来源:未知    时间:2014-10-30 10:02 作者:xxadmin 阅读:

[导读] 在流体 图片 列表中常常遇见 CSS 控制好 DIV 里图片 宽度 ,图片 高度 自适比例缩放布局,其实这样的布局并非像的那么复杂,不要考虑CSS控制高度即是最好的布局。 DIV里图片宽度固定...

在流体图片列表中常常遇见CSS控制好DIV里图片宽度,图片高度自适比例缩放布局,其实这样的布局并非像的那么复杂,不要考虑CSS控制高度即是最好的布局。

DIV里图片宽度固定高度等比例缩放效果
DIV里图片宽度固定高度等比例缩放效果截图

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

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


  1. .imgbox img{width:252px} 

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

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

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

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论