css如何让图片不变形

CSS让图片不变形的基础概念

CSS（层叠样式表）是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。在处理图片时，CSS提供了多种属性来控制图片的显示方式，以确保图片在不同尺寸和分辨率的屏幕上保持其原始比例，避免变形。

类型

object-fit属性：用于指定如何调整图像的大小以适应其容器。
max-width和max-height属性：限制图片的最大尺寸，防止图片过大。
width和height属性：设置图片的固定尺寸，但需注意配合object-fit使用以避免变形。

应用场景

响应式网页设计：在不同设备和屏幕尺寸上保持图片的视觉效果。
图像库或相册：确保所有图片在展示时都能保持其原始比例。
广告或横幅：在固定尺寸的广告位中展示图片，避免变形。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>保持图片不变形</title>
    <style>
        .image-container {
            width: 300px;
            height: 200px;
            overflow: hidden;
        }
        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: contain; /* 或者使用 cover, fill, none, scale-down */
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="path/to/your/image.jpg" alt="示例图片">
    </div>
</body>
</html>