笙亿网络策划

CSS RWD 里图片怎么做响应式？

约 10 分钟读完 42 阅
文章导读
Previous Quiz Next 在响应式网页设计中，确保图片在所有屏幕尺寸和分辨率下都能良好适应非常重要。通过使用诸如 `max-width` 和 `min-width` 等属性，图片可以自动调整大小以适应不同的屏幕。本章中，我们将学习如何让图片响应式，了解响应式
📋 目录
  1. 壹 使用 width 属性实现响应式图片
  2. 贰 使用 max-width 属性实现响应式图片
  3. 叁 CSS 图片画廊
  4. 肆 响应式图片画廊
A A

CSS RWD 图片

Previous
Quiz
Next

在响应式网页设计中，确保图片在所有屏幕尺寸和分辨率下都能良好适应非常重要。通过使用诸如 `max-width` 和 `min-width` 等属性，图片可以自动调整大小以适应不同的屏幕。本章中，我们将学习如何让图片响应式，了解响应式图片的关键属性，并查看如何创建响应式图片画廊。

当图片上传到网页时，它将以默认的宽度和高度显示。我们可以在 CSS 中更改这些尺寸，使图片根据布局中的可用空间进行适应。设置图片尺寸的一种流行方法是为图片保持固定宽度（例如屏幕的 50% 或 25%），高度则会根据图片的纵横比自动设置。

为了更好的适应性，我们应该始终为 width 属性使用相对单位，例如百分比，而不是绝对值（如像素）。绝对值会限制图片的响应式效果。

使用 width 属性实现响应式图片

要让图片根据屏幕尺寸缩放，我们需要将图片的 width 属性设置为 100%，height 设置为 auto。

img {
    width: 100%;
    height: auto;
}

以这种方式设置样式会使图片占据父元素的 100% 宽度，高度将调整以保持图片的纵横比。这种设置允许图片随屏幕尺寸缩放。然而，在非常大的屏幕上，图片可能会超出其自然宽度，导致出现失真。

示例

在这个示例中，显示的图片将根据输出窗口的屏幕尺寸缩放。在 HTML Compiler 中运行此代码，调整输出窗口宽度以验证。

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <p>
        The image will cover 100% width
    </p>
    <img src="/css/images/border.png">
</body>

</html>

使用 max-width 属性实现响应式图片

上述方法有一个缺点，在大屏幕上图片会超出其自然尺寸。为了防止这种情况，我们可以使用 max-width 属性代替 width 属性。

img {
    max-width: 100%;
    height: auto;
}

以这种方式设置图片属性，图片在需要时会缩小，但永远不会放大超过其原始尺寸。

示例

在这个示例中，显示的图片将根据输出窗口的屏幕尺寸缩放，但永远不会超过其自然尺寸。在 HTML Compiler 中运行此代码，调整输出窗口宽度以验证。

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <p>
        The image will cover 100% width if natural width is less than
        output screen width
    </p>
    <img src="/css/images/border.png">
</body>

</html>

CSS 图片画廊

CSS Image Gallery 用于以响应式且视觉吸引力的格式组织和显示多张图片。可以使用 CSS 属性来控制图片的布局、大小、形状、间距、跨行以及许多其他视觉效果。

CSS grid layout 是设计图片画廊最常用的布局系统，使用它我们可以以二维方式对齐图片。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 画廊容器 */
        .gallery {
            display: grid;
            gap: 10px;
            padding: 10px;
            font-family: Arial, sans-serif;
        }

        /* 样式化图片项 */
        .gallery img {
            width: 100%;
            height: 100px; /* 为所有图片设置相同的高度 */
            object-fit: fit;
            display: block;
            border-radius: 8px;
            border: 3px solid #ccc;
            transition: all 0.3s ease;
        }

        /* 让第一张图片跨两行 */
        .gallery img:first-child {
            grid-row: span 2;
            height: 210px; /* 常规图片高度的两倍 */
        }

        /* 让第六张图片跨两列 */
        .gallery img:nth-child(6) {
            grid-column: span 2;
        }

        /* 悬停效果 */
        .gallery img:hover {
            transform: scale(1.02);
            border-color: #555 ; 
        }
    </style>
</head>

<body>
    <div class="gallery">
        <img src="/w3css/images/w3css_pdfcover.jpg" alt="Gallery Image 1">
        <img src="/css/images/html.png" alt="Gallery Image 2">
        <img src="/css/images/css.png" alt="Gallery Image 3">
        <img src="/css/images/html.png" alt="Gallery Image 4">
        <img src="/css/images/css.png" alt="Gallery Image 5">
        <img src="/html/images/logo.png" alt="Gallery Image 6">               
    </div>
</body>

</html>

响应式图片画廊

我们可以使用 CSS media queries 来创建一个响应式图片画廊，它会根据屏幕宽度缩放和重新排列内容。以下是一个简单的 media query 示例，它为大屏幕和小屏幕定义了图片画廊的列数。

/* 大屏幕情况下 4 列 */
@media (min-width: 600px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 小屏幕情况下 1 列 */
@media (max-width: 599px) {
    .gallery {
        grid-template-columns: 1fr;
    }
}

使用 media queries，我们还可以为用户设备的特定方向（横屏或竖屏）定义样式。此处的默认值为 portrait。

Example

这是一个设计响应式图片画廊的示例。

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 画廊容器 */
        .gallery {
            display: grid;
            gap: 10px;
            padding: 10px;
            font-family: Arial, sans-serif;
        }

        /* 大屏幕情况下 4 列 */
        @media (min-width: 600px) {
            .gallery {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* 小屏幕情况下 1 列 */
        @media (max-width: 599px) {
            .gallery {
                grid-template-columns: 1fr;
            }
        }

        /* 单个图片项 */
        .gallery img {
            width: 100%;
            height: 100px; /* 为所有图片设置相同高度 */
            object-fit: fit; /* 确保图片适应区域 */
            display: block;
            border-radius: 8px;
            border: 3px solid #ccc; /* 默认边框颜色 */
            transition: all 0.3s ease;
        }

        /* 第一张图片跨两行 */
        .gallery img:first-child {
            grid-row: span 2;
            height: 210px; /* 常规图片高度的两倍 */
        }

        /* 第六张图片跨两列 */
        .gallery img:nth-child(6) {
            grid-column: span 2;
        }

        /* 悬停效果 */
        .gallery img:hover {
            transform: scale(1.02);
            border-color: #555 ; 
        }
    </style>
</head>

<body>
    <div class="gallery">
        <img src="/w3css/images/w3css_pdfcover.jpg" alt="Gallery Image 1">
        <img src="/css/images/html.png" alt="Gallery Image 2">
        <img src="/css/images/css.png" alt="Gallery Image 3">
        <img src="/css/images/html.png" alt="Gallery Image 4">
        <img src="/css/images/css.png" alt="Gallery Image 5">
        <img src="/html/images/logo.png" alt="Gallery Image 6">               
    </div>
</body>

</html>

大屏幕输出：

小屏幕输出：