CSS 宽高比|极客教程

CSS 宽高比

在网页设计中，经常会遇到需要设置元素的宽高比的情况，比如图片、视频等。在CSS中，我们可以通过多种方式来实现元素的宽高比设置，本文将详细介绍这些方法，并提供示例代码。

1. 使用padding实现固定宽高比

通过设置元素的padding-top或padding-bottom属性，可以实现固定宽高比的效果。具体的计算公式为：高度 / 宽度 * 100%。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 宽高比 - 使用padding实现固定宽高比</title>
<style>
    .container {
        position: relative;
        width: 100%;
        padding-top: 56.25%; /* 16:9 宽高比 */
        background-color: #f0f0f0;
    }
    .content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #333;
    }
</style>
</head>
<body>
<div class="container">
    <div class="content"></div>
</div>
</body>
</html>

Output:

CSS 宽高比

在上面的示例代码中，我们通过设置.container元素的padding-top为56.25%，实现了16:9的宽高比效果。.content元素作为.container的子元素，会根据.padding-top的比例来设置高度，从而实现固定宽高比。

2. 使用伪元素实现固定宽高比

除了使用padding属性，我们还可以通过伪元素来实现固定宽高比。这种方法的优点是可以避免额外的HTML结构，使代码更加简洁。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 宽高比 - 使用伪元素实现固定宽高比</title>
<style>
    .container {
        position: relative;
        width: 100%;
        background-color: #f0f0f0;
    }
    .container::before {
        content: "";
        display: block;
        padding-top: 56.25%; /* 16:9 宽高比 */
    }
    .content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #333;
    }
</style>
</head>
<body>
<div class="container">
    <div class="content"></div>
</div>
</body>
</html>

Output:

CSS 宽高比

在上面的示例代码中，我们通过.container::before伪元素来设置固定的宽高比，实现了与前一个示例相同的效果。

3. 使用绝对定位实现固定宽高比

另一种常见的方法是使用绝对定位来实现固定宽高比。通过设置元素的position属性为absolute，并设置top、left、right、bottom属性，可以实现元素的固定宽高比。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 宽高比 - 使用绝对定位实现固定宽高比</title>
<style>
    .container {
        position: relative;
        width: 100%;
        padding-top: 56.25%; /* 16:9 宽高比 */
        background-color: #f0f0f0;
    }
    .content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #333;
    }
</style>
</head>
<body>
<div class="container">
    <div class="content"></div>
</div>
</body>
</html>

Output:

CSS 宽高比

在上面的示例代码中，我们通过设置.content元素的position为absolute，并设置top、left、right、bottom为0，实现了与前两个示例相同的效果。

4. 使用固定宽高比容器实现响应式宽高比

有时候我们需要实现响应式的宽高比，即在不同屏幕尺寸下，元素的宽高比保持不变。这时可以使用固定宽高比容器来实现。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 宽高比 - 使用固定宽高比容器实现响应式宽高比</title>
<style>
    .container {
        position: relative;
        width: 100%;
        padding-top: 56.25%; /* 16:9 宽高比 */
        background-color: #f0f0f0;
    }
    .content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #333;
    }
</style>
</head>
<body>
<div class="container">
    <div class="content"></div>
</div>
</body>
</html>

Output:

CSS 宽高比

在上面的示例代码中，我们通过设置.container元素的padding-top为56.25%，实现了16:9的宽高比。在不同屏幕尺寸下，元素的宽高比会保持不变。

5. 使用JavaScript实现动态宽高比

除了纯CSS的方法，我们还可以使用JavaScript来实现动态宽高比。通过监听窗口大小变化事件，动态计算元素的宽高比，可以实现更加灵活的效果。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 宽高比 - 使用JavaScript实现动态宽高比</title>
<style>
    .container {
        position: relative;
        width: 100%;
        background-color: #f0f0f0;
    }
    .content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #333;
    }
</style>
</head>
<body>
<div class="container">
    <div class="content"></div>
</div>
<script>
    function setAspectRatio() {
        var container = document.querySelector('.container');
        var aspectRatio = 16 / 9; // 16:9 宽高比
        container.style.paddingTop = (1 / aspectRatio) * 100 + '%';
    }

    window.addEventListener('resize', setAspectRatio);
    setAspectRatio();
</script>
</body>
</html>

Output:

CSS 宽高比

在上面的示例代码中，我们通过JavaScript监听窗口大小变化事件，动态计算元素的宽高比。当窗口大小变化时，元素的宽高比会自动调整。

6. 使用CSS Grid实现多列等高布局

在网页布局中## 7. 使用CSS Grid实现多列等高布局

在网页布局中，经常会遇到需要实现多列等高布局的情况。通过使用CSS Grid，我们可以轻松实现多列等高布局，并且可以设置每列的宽高比。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 宽高比 - 使用CSS Grid实现多列等高布局</title>
<style>
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
    }
    .item {
        background-color: #f0f0f0;
    }
    .item:nth-child(1) {
        grid-row: span 2;
    }
    .item:nth-child(2) {
        grid-row: span 1;
    }
    .item:nth-child(3) {
        grid-row: span 1;
    }
</style>
</head>
<body>
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>
</body>
</html>

Output:

CSS 宽高比

在上面的示例代码中，我们通过设置.grid-template-columns属性为repeat(3, 1fr)，实现了3列等宽布局。通过设置.item元素的grid-row属性，可以设置每列的高度，从而实现多列等高布局。

8. 使用CSS Flexbox实现垂直居中和宽高比

在网页设计中，经常会遇到需要实现垂直居中和宽高比的情况。通过使用CSS Flexbox，我们可以轻松实现垂直居中和宽高比效果。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 宽高比 - 使用CSS Flexbox实现垂直居中和宽高比</title>
<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 300px;
        background-color: #f0f0f0;
    }
    .content {
        width: 80%;
        padding-top: 56.25%; /* 16:9 宽高比 */
        position: relative;
    }
    .inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #333;
    }
</style>
</head>
<body>
<div class="container">
    <div class="content">
        <div class="inner"></div>
    </div>
</div>
</body>
</html>

Output:

CSS 宽高比

在上面的示例代码中，我们通过设置.container元素为flex布局，并设置justify-content和align-items属性为center，实现了垂直居中效果。通过设置.content元素的padding-top为56.25%，实现了16:9的宽高比效果。

9. 使用CSS Aspect Ratio属性实现固定宽高比

CSS Aspect Ratio属性是CSS4中的新属性，可以用来设置元素的固定宽高比。通过设置元素的aspect-ratio属性，可以实现元素的宽高比效果。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 宽高比 - 使用CSS Aspect Ratio属性实现固定宽高比</title>
<style>
    .container {
        width: 100%;
        aspect-ratio: 16 / 9; /* 16:9 宽高比 */
        background-color: #f0f0f0;
    }
    .content {
        width: 100%;
        height: 100%;
        background-color: #333;
    }
</style>
</head>
<body>
<div class="container">
    <div class="content"></div>
</div>
</body>
</html>

Output:

CSS 宽高比

在上面的示例代码中，我们通过设置.container元素的aspect-ratio属性为16/9，实现了16:9的宽高比效果。这种方法是CSS4中新增的属性，可以更加方便地设置元素的宽高比。

10. 使用SVG实现可伸缩的宽高比

除了纯CSS的方法，我们还可以使用SVG来实现可伸缩的宽高比。通过设置SVG元素的viewBox属性和preserveAspectRatio属性，可以实现元素的宽高比效果。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 宽高比 - 使用SVG实现可伸缩的宽高比</title>
<style>
    svg {
        width: 100%;
        height: auto;
    }
</style>
</head>
<body>
<svg viewBox="0 0 16 9" preserveAspectRatio="xMidYMid meet">
    <rect x="0" y="0" width="16" height="9" fill="#f0f0f0"/>
</svg>
</body>
</html>