css：怎么设置图片不变形
问：
main元素中有一个img元素，这个img src=‘@/assets/images/tupian.png’css设置了img元素width：50% height:50%但是图片变形了，我应该怎么设置保持图片样式不变形
回答：
为了确保图片在调整大小时不变形，你可以使用CSS中的`object-fit`属性。`object-fit`属性定义了替换元素（如`<img>`）的内容应该如何适应其容器的框。常用的值包括`cover`和`contain`。
- `cover`：保持图片的宽高比，并确保图片覆盖整个容器框。图片可能会被裁剪。
- `contain`：保持图片的宽高比，并确保图片完全显示在容器框中。容器框可能会有空白区域。
以下是一个示例，展示了如何使用`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>
main {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 50%;
height: 50%;
object-fit: cover; /* 或者使用 object-fit: contain; */
}
</style>
</head>
<body>
<main>
<img src="@/assets/images/tupian.png" alt="示例图片">
</main>
</body>
</html>
在这个示例中：
- `width: 50%;` 和 `height: 50%;` 设置图片的宽度和高度为容器的50%。
- `object-fit: cover;` 确保图片保持宽高比，并覆盖整个容器框。如果图片的宽高比与容器的宽高比不同，图片可能会被裁剪。
- 你也可以使用 `object-fit: contain;` 来确保图片完全显示在容器框中，但容器框可能会有空白区域。
选择`cover`还是`contain`取决于你希望图片如何适应容器框。如果你希望图片完全显示，使用`contain`；如果你希望图片覆盖整个容器框，使用`cover`。