css:怎么设置图片不变形

问:

main元素中有一个img元素,这个img src='@/assets/images/tupian.png'css设置了img元素width:50% height:50%但是图片变形了,我应该怎么设置保持图片样式不变形

回答:

html 复制代码
为了确保图片在调整大小时不变形,你可以使用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`。
相关推荐
余道各努力,千里自同风11 小时前
小程序中获取元素节点
前端·小程序
PineappleCoder11 小时前
大模型也栽跟头的 Promise 题!来挑战一下?
前端·面试·promise
非凡ghost11 小时前
MousePlus(鼠标增强工具) 中文绿色版
前端·windows·计算机外设·软件需求
焚 城11 小时前
EXCEL(带图)转html【uni版】
前端·html·excel
我家媳妇儿萌哒哒11 小时前
Vue2 elementUI年份区间选择组件
前端·javascript·elementui
笨笨狗吞噬者11 小时前
【uniapp】小程序体积优化,分包异步化
前端·微信小程序·uni-app
该用户已不存在11 小时前
Golang 上传文件到 MinIO?别瞎折腾了,这 5 个库拿去用
前端·后端·go
snows_l11 小时前
JavaScript 性能优化实战大纲
前端
文心快码BaiduComate11 小时前
文心快码3.5S开发古风射覆小游戏,它帅到我了!
前端·后端·程序员
白兰地空瓶12 小时前
用 Stylus 写 CSS 有多爽?从响应式面板案例看透它的优雅
css·stylus