css图片不变形显示

蛙夏~

已于 2022-08-19 17:29:54 修改

阅读量2.8k

点赞数 2

分类专栏： css 文章标签： css html

于 2022-08-19 17:29:13 首次发布

本文链接：https://blog.csdn.net/y1238r/article/details/126427724

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、图片添加object-fit属性
1、代码
IE浏览器不支持object-fit属性，其它浏览器可以~

.img-style {
	width: 200px;
    height: 300px;
    object-fit: cover;
}

2、object-fit相关属性
在这里插入图片描述
二、transform实现图片不变形
(1) 图片元素加以下样式：

.img-style {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

(2) 举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片显示</title>
    <style>
        .main {
            position: relative;
            width: 200px;
            height: 300px;
            border: 1px solid black;
        }
        .img-style {
            max-width: 100%;
            max-height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="main">
        <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" class="img-style">
    </div>
</body>
</html>