aspect-ratio 属性简介

65 阅读1分钟

①aspect-ratio 属性可以明确元素的高宽比例;
②在默认情况下,如果容器内的内容非常的多,已经超过了当前设定的比例限制,则此时元素设定的尺寸比例不保留;
③如果希望无论元素的内容是多还是少,元素都保持固定的 aspect-ratio 比例,则可以设置 min-height:0,让最小高度不再基于内容计算,而是固定的数值,这样,aspect-ratio 比例设置的优先级就会更高;
④如果 width 和 height 属性都没有设置,则 aspect-ratio 按照当前的宽度计算;
⑤如果 width 和 height 属性仅设置了 1 个,则另外一个方位的尺寸根据 aspect-ratio 进行计算;
⑥如果 width 和 height 属性同时设置,则忽略 aspect-ratio 属性;
⑦aspect-ratio 属性对尺寸影响的优先级非常弱;
(参考:www.zhangxinxu.com/wordpress/2…