图片等比例缩放、width与padding-top配合实现正方形

原创 阿波罗D波 随笔 study 361阅读 2018-05-29 17:51:14 举报

图片等比例缩放

关键代码:
图片等比例缩放是指相对父元素等比例缩放;<br>当父元素宽高够大时,图片显示原尺寸;<br>当父元素宽高变窄时,图片也随之等比缩小;
demo:
不论父元素怎么变,图片都能等比例的显示。

width 与 padding-top 配合

页面布局中,经常需要用百分比来实现宽度自适应,但是如果高度要跟宽度呈固定比例变化,该怎么办呢?<br>解决:利用元素padding的百分比值。<br>padding或margin的百分比值是参照父元素的宽度,即如果元素的padding或margin值是百分比值,那么,它的值是根据父元素的宽度来计算的。
实现一个自适应的正方形:
关键代码
demo:
实现一个自适应16:9比例的div
关键代码
demo:
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复