首页 前端知识 CSS--解决图片变形的方法

CSS--解决图片变形的方法

2024-11-10 09:11:22 前端知识 前端哥 212 242 我要收藏

原文网址:CSS--解决图片变形的方法_IT利刃出鞘的博客-CSDN博客

简介

本文介绍html文件中图片变形的解决方法。

问题描述

我们经常需要指定所有图片的大小,让它们排列起来时看起来更整齐。但是,如果我们指定了width和height,那么图片会被拉伸,会很难看。

比如:

从图中可以看到,指定大小后, 图片被拉伸了,很不好看。

代码如下:

<html xml:lang="cn" lang="cn">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="keywords" content="anchor,fixed navigation hide anchor">
    <title></title>
    <style>
        body {
            display: flex;
        }

        .container img{
            width: 200px;
            height: 200px;
            margin: 10px;
        }
    </style>
</head>

<body>

<div>
    <img src="../img/bat.png" />
    <div>原始图片</div>
</div>

<div class="container">
    <img src="../img/bat.png" />
    <div>指定大小</div>
</div>

</body>

</html>

方案1:object-fit

概述

使用object-fit属性:用cover或者contain。

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}
  • contain
    • 保持原有尺寸比例。内容被缩放。
  • cover
    • 保持原有尺寸比例。若图片大于指定大小,则只留下中间的部分。
  • fill
    • 不保证保持原有的比例,内容拉伸填充整个内容容器。
    • 与不使用object-fit的结果是一样的。
  • none
    • 保留原有元素内容的长度和宽度,也就是说内容不会被重置。
  • scale-down
    • 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。

代码

<html xml:lang="cn" lang="cn">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="keywords" content="anchor,fixed navigation hide anchor">
    <title></title>
    <style>
        body {
            display: flex;
        }

        .container img{
            width: 200px;
            height: 200px;
            margin: 10px;
        }
    </style>
</head>

<body>

<div>
    <img src="../img/bat.png" />
    <div>原始图片</div>
</div>

<div class="container">
    <img src="../img/bat.png" />
    <div>指定大小</div>
</div>

<div class="container">
    <img src="../img/bat.png" style="object-fit:contain"/>
    <div>object-fit:contain</div>
</div>

<div class="container">
    <img src="../img/bat.png" style="object-fit:cover"/>
    <div>object-fit:cover</div>
</div>

<div class="container">
    <img src="../img/bat.png" style="object-fit:fill"/>
    <div>object-fit:fill</div>
</div>

<div class="container">
    <img src="../img/bat.png" style="object-fit:none"/>
    <div>object-fit:none</div>
</div>

<div class="container">
    <img src="../img/bat.png" style="object-fit:scale-down"/>
    <div>object-fit:scale-down</div>
</div>

<div class="container">
    <img src="../img/bat.png" style="object-fit:revert"/>
    <div>object-fit:revert</div>
</div>

</body>

</html>

结果

方案2:background-size

概述

通过背景图的方式处理,使用background-size:用cover或者contain。

contain

对背景图片进行等比例的放大/缩小处理,直至背景图片能够完完整整的展示出来。

优点:图片不会出现变形,同时背景图片被完全展示出来;

缺点:所属元素的宽高比与背景图片的宽高比不同时,会出现背景留白。

cover

如果背景图片尺寸大于所属元素尺寸,则背景图片不进行方法,正常显示,超出部分被隐藏。

如果背景图片尺寸小于所属元素尺寸,则背景图片进行等比例放大(图片不会出现变形),直至完全覆盖所属元素区域,超出部分被隐藏。

优点:背景图片全部覆盖所属元素区域;

缺点:超出的部分会被隐藏。

代码

<html xml:lang="cn" lang="cn">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="keywords" content="anchor,fixed navigation hide anchor">
    <title></title>
    <style>
        body {
            display: flex;
        }

        .container{
            width: 200px;
            height: 200px;
            margin: 10px;

            background-image: url('../img/bat.png');
            background-repeat: no-repeat;
            background-position: center;
        }

    </style>
</head>

<body>

<div>
    <img src="../img/bat.png" />
    <div>原始图片</div>
</div>

<div class="container">
    <div style="color: lightgreen">指定大小</div>
</div>

<div class="container" style="background-size: contain">
    <div style="color: lightgreen">background-size: contain</div>
</div>

<div class="container" style="background-size: cover">
    <div style="color: lightgreen">background-size: cover</div>
</div>

</body>

</html>

结果

转载请注明出处或者链接地址:https://www.qianduange.cn//article/20159.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!