有没有可能使用CSS给予一个任意的(非媒体)元素一个固有的比率?

bweufnob  于 2022-12-24  发布在  其他
关注(0)|答案(1)|浏览(123)

如果我有一张图片或其他媒体类型(imgvideoobjectsvg),那么浏览器“知道”它"应该“有一个特定的高宽比。这对于响应式设计很有用,因为这样你就可以设置例如width: 100%; height: auto;,高度会缩放以保持正确的长宽比。
CSS如何(如果有的话)被用来给予,比如说,一个任意的div的固有比率?
换句话说,当精确的尺寸无法提前知道并动态计算时,是否可以为任意元素指定一个高度,使其始终解析为某个常数乘以其宽度(反之亦然)?

owfi6suc

owfi6suc1#

您可以使用aspect-ratio,或者如果您需要更好的浏览器支持,您可以使用padding-bottom和百分比。
所以本质上:

.cool-div {
  aspect-ratio: 16 / 9;
}

相关问题