弹性图片

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 66 课，共 76 课。

在响应式网页设计中，弹性图片会自动调整以适应不同的屏幕尺寸，确保在所有设备上都显示良好。如果图片没有弹性，在小屏幕上可能会显得过大，或破坏页面布局。

如何让图像具有灵活性：

1. 使用 CSS max-width
设置 max-width: 100% 可确保图片宽度不会超过其容器的宽度。

img {
  max-width: 100%;
  height: auto; /* 保持宽高比 */
}

2.使用视口单位
你可以使用 vw（视口宽度）设置图片大小，让图片随屏幕尺寸缩放。

img {
  width: 50vw; /* 图片占视口宽度的 50% */
}

挑战

简单

给你一个包含图像的 HTML 文档。你的任务是让图像具有响应式效果，使其能够适应不同的屏幕尺寸。

编写一条 CSS 规则，选中所有 class 为 img-max 的元素。将其 max-width 设为 100%，并将 height 设为 auto。
编写一条 CSS 规则，选中所有 class 为 img-vw 的元素。将其 width 设为 50vw，并将 height 设为 auto。

亲手试试

<html>
<head>
    <title>Flexible Images</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
     <div class="container">
        <h2>Image with max-width: 100%</h2>
        <img class="img-max" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Adelie_penguins_in_the_South_Shetland_Islands.jpg" alt="Max-Width Image">
    </div>

    <div class="container">
        <h2>Image with width: 50vw</h2>
        <img class="img-vw" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Adelie_Penguins_on_iceberg.jpg">
    </div>
</body>
</html>