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

2024-06-20 20:28

本文主要是介绍CSS--解决图片变形的方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

原文网址: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>

结果

这篇关于CSS--解决图片变形的方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1079165

相关文章

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

Spring的RedisTemplate的json反序列泛型丢失问题解决

《Spring的RedisTemplate的json反序列泛型丢失问题解决》本文主要介绍了SpringRedisTemplate中使用JSON序列化时泛型信息丢失的问题及其提出三种解决方案,可以根据性... 目录背景解决方案方案一方案二方案三总结背景在使用RedisTemplate操作redis时我们针对

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

SpringBoot整合Dubbo+ZK注册失败的坑及解决

《SpringBoot整合Dubbo+ZK注册失败的坑及解决》使用Dubbo框架时,需在公共pom添加依赖,启动类加@EnableDubbo,实现类用@DubboService替代@Service,配... 目录1.先看下公共的pom(maven创建的pom工程)2.启动类上加@EnableDubbo3.实

Nginx安全防护的多种方法

《Nginx安全防护的多种方法》在生产环境中,需要隐藏Nginx的版本号,以避免泄漏Nginx的版本,使攻击者不能针对特定版本进行攻击,下面就来介绍一下Nginx安全防护的方法,感兴趣的可以了解一下... 目录核心安全配置1.编译安装 Nginx2.隐藏版本号3.限制危险请求方法4.请求限制(CC攻击防御)

nginx中端口无权限的问题解决

《nginx中端口无权限的问题解决》当Nginx日志报错bind()to80failed(13:Permissiondenied)时,这通常是由于权限不足导致Nginx无法绑定到80端口,下面就来... 目录一、问题原因分析二、解决方案1. 以 root 权限运行 Nginx(不推荐)2. 为 Nginx

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

解决1093 - You can‘t specify target table报错问题及原因分析

《解决1093-Youcan‘tspecifytargettable报错问题及原因分析》MySQL1093错误因UPDATE/DELETE语句的FROM子句直接引用目标表或嵌套子查询导致,... 目录报js错原因分析具体原因解决办法方法一:使用临时表方法二:使用JOIN方法三:使用EXISTS示例总结报错原

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口