视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
怎样用CSS使图片高度自动缩放比例
2020-11-27 18:49:47 责编:小采
文档

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

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

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

.imgbox img{width:252px}

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

小结:

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

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

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

相关阅读:

怎样让DIV自适应高度

在HTML里用CSS隐藏div的方法

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

下载本文
显示全文
专题