如果我有一张图片或其他媒体类型(img,video,object,svg),那么浏览器“知道”它"应该“有一个特定的高宽比。这对于响应式设计很有用,因为这样你就可以设置例如width: 100%; height: auto;,高度会缩放以保持正确的长宽比。CSS如何(如果有的话)被用来给予,比如说,一个任意的div的固有比率?换句话说,当精确的尺寸无法提前知道并动态计算时,是否可以为任意元素指定一个高度,使其始终解析为某个常数乘以其宽度(反之亦然)?
img
video
object
svg
width: 100%; height: auto;
div
owfi6suc1#
您可以使用aspect-ratio,或者如果您需要更好的浏览器支持,您可以使用padding-bottom和百分比。所以本质上:
aspect-ratio
padding-bottom
.cool-div { aspect-ratio: 16 / 9; }
1条答案
按热度按时间owfi6suc1#
您可以使用
aspect-ratio
,或者如果您需要更好的浏览器支持,您可以使用padding-bottom
和百分比。所以本质上: