数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 CSS 保持 HTML 视频的纵横比
通过以百分比指定元素的填充，我们可以保持其纵横比。纵横比是图像宽度与其高度的比率。也可以使用 aspect-ratio 属性来保持纵横比。
使用 padding-top 属性设置视频的纵横比
使用 padding-top 属性设置网页上元素的纵横比。以下是 CSS padding 属性：
padding-bottom 指定元素的底部填充。
padding-top 指定元素的顶部填充。
padding-left 指定元素的左侧填充。
padding-right 指定元素的右侧填充。
padding 作为前面属性的简写。
纵横比 16:9
要使用 CSS 保持视频的纵横比，代码如下。这里，我们使用 padding-top 属性设置了 16:9 的纵横比，即 56%：
9 by 16 i.e., 0.5625% (56.25%)
示例
让我们看看这个例子：
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10%;
padding-top: 56.25%;
height: 0px;
position: relative;
box-shadow: 0 0 0 20px antiquewhite;
}
iframe {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div>
<iframe src="https://www.youtube.com/embed/0cwk9UMLnWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe>
</div>
</body>
</html>
纵横比 4:3
要使用 CSS 保持元素的纵横比，代码如下。这里，我们使用 padding-top 属性设置了 4:3 的纵横比，即 75%：
3 by 4 i.e. 0.75% (75%)
示例
让我们看看这个例子：
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10%;
padding-top: 75%;
height: 0px;
position: relative;
box-shadow: 0 0 0 20px antiquewhite;
}
iframe {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div>
<iframe src="https://www.youtube.com/embed/0cwk9UMLnWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe>
</div>
</body>
</html>
使用 aspect-ratio 属性设置纵横比
使用 aspect-ratio 属性来保持网页上视频的纵横比：
div {
margin: 10%;
aspect-ratio: 3/2;
height: 0px;
position: relative;
box-shadow: 0 0 0 20px antiquewhite;
}
示例
让我们看看这个例子：
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10%;
aspect-ratio: 3/2;
height: 0px;
position: relative;
box-shadow: 0 0 0 20px antiquewhite;
}
iframe {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>3:2 Aspect Ratio is set</div>
<iframe src="https://www.youtube.com/embed/0cwk9UMLnWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe>
</body>
</html>
更新于: 2023-12-26
383 次浏览
广告