css图片属性,图片自适应

CSS 图片属性指南:background-size 和 object-fit
在前端开发中,使用图片是非常常见的。为了让图片在网页中显示得更好,CSS 提供了多种属性来调整和控制图片的大小和布局。其中,background-size 和 object-fit 是两个常用的属性,它们可以根据需要调整图片的大小和适应方式。
一、background-size 属性:
background-size 属性用于调整背景图片的大小。它可以使用以下几个值:
1.cover:将背景图像等比缩放并完全覆盖容器,可能会出现部分图像被裁剪的情况。

.background{background:url('../../assets/1.jpg');background-size:cover;
}

2.contain:将背景图像等比缩放并尽量完整地显示在容器内

.background{background:url('../../assets/1.jpg');background-size:contain;
}

3.length:指定背景图像的宽度和高度

.background{background:url('../../assets/1.jpg');background-size:200px 200px;
}

4.percentage:指定背景图像的宽度和高度相对于容器的百分比

.background{background:url('../../assets/1.jpg');background-size:50% 70%;
}

二、object-fit 属性

object-fit 属性用于调整标签中的图片的大小和适应方式。它可以使用以下几个值:
1.fill:将图片拉伸以充满元素,可能会导致图片失真。

.img{width:100px;height:100px;object-fit:fill;
}

2.contain:将图片等比缩放并尽量完整地显示在元素中。

.img{width:100px;height:100px;object-fit:contain;
}

3.cover:将图片等比缩放并完全覆盖元素,可能会出现部分图像被裁剪的情况。

.img{width:100px;height:100px;object-fit:cover;
}

4.scale-down:根据图片的原始尺寸和容器的大小决定图片的大小和适应方式。

.img{width:100px;height:100px;object-fit:scale-down;
}

如下代码实现的效果可看出,第三章图片更清晰

 <div style="width:100px;height:100px"><img style="display:inline-block;width:100%;height:100%" src="../../assets/1.jpg" alt=""></div><div style="width:100px;height:100px"><img style="display:inline-block;width:100%;height:100%" src="../../assets/2.jpg" alt=""></div><div style="width:100px;height:100px"><img style="object-fit:cover;width:100px;height:100px" src="../../assets/1.jpg" alt=""></div></div>

在这里插入图片描述
通过使用 background-size 或 object-fit 属性,我们可以很方便地调整和控制图片的大小和适应方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/237846.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

制作系统安装盘教程——烧录Windows原版镜像

前言 本次教程不经过WinPE工具进行安装Windows原版镜像&#xff0c;而是直接把系统镜像文件直接烧录进U盘&#xff0c;这样做的好处是不经过WinPE安装Win系统的过程&#xff0c;避免有些带木马病毒的WinPE在安装系统的过程把木马病毒带进系统&#xff0c;从而导致文件泄漏。 开…

【JavaWeb学习笔记】13 - JSP浏览器渲染技术

JSP 一、JSP引入 1.JSP现状 1.目前主流的技术是前后端分离(比如: Spring Boot Vue/React),我们会讲的.[看一下] 2. JSP技术使用在逐渐减少&#xff0c;但使用少和没有使用是两个意思&#xff0c;一些老项目和中小公司还在使用JSP&#xff0c;工作期间,你很有可能遇到JSP …

【设计模式-2.5】创建型——建造者模式

说明&#xff1a;本文介绍设计模式中&#xff0c;创建型设计模式中的最后一个&#xff0c;建造者模式&#xff1b; 入学报道 创建型模式&#xff0c;关注于对象的创建&#xff0c;建造者模式也不例外。假设现在有一个场景&#xff0c;高校开学&#xff0c;学生、教师、职工都…

Spring 5.x较上一版本的主要特性

Spring Framework 5.0 是在 2017 年发布的一个主要版本&#xff0c;它带来了许多改进和新特性&#xff0c;相比于 Spring Framework 4.x&#xff0c;主要的升级包括&#xff1a; 基于 Java 8 的基线&#xff1a; Spring 5 需要 Java 8 或更高版本&#xff0c;这使得框架得以利用…

LLaMA-Factory如何对Tokenization步骤提速

问题 数据量稍微大一些&#xff0c;在运行这个步骤“Running tokenizer on dataset”就要等半小时以上&#xff0c;然后才知道后续是否会报错。Tokenization步骤看上去并没有使用到GPU&#xff0c;只是在CPU上运行的。 是否有什么方法对这个步骤进行加速呢&#xff0c;比如多C…

c/c++实现隐藏密码

1. 我们在平常输入密码是,不能直接显示密码,应该显示*或者其它字符。 void inputPwd(char *pwd,int length) {char ch; // 用来存储getch()都进来的字符int i 0;while (1){ch getch(); /*这个函数可以实现输入不回显(输入不在终端显示)*/if (ch \r) /*密码输入结束输入回车…

Lua脚本在Redis中的高效应用

大家好&#xff0c;我是升仔 引言 Redis作为一个多功能的键值数据库&#xff0c;其性能非常出色&#xff0c;特别是在处理高速缓存和消息队列方面。而Lua脚本的引入&#xff0c;则进一步增强了Redis的能力。 1、Lua脚本与Redis的结合 Redis选择Lua作为脚本语言&#xff0c;主…

12.21

一、注意事项 1.CtrlShiftT用于从jar中查找类&#xff0c;这个eclipse键盘快捷键可以帮助快速找到类 2.更新upm和rest遇到重复解决方法 把upm文件里面多出来的三行代码删掉&#xff0c;右击upm文件&#xff0c;点击小组&#xff0c;点击标记为已解决&#xff0c;点击OK&#x…

ElasticSearch DSL Bool查询

Bool 查询的三个主要成分&#xff1a;must、should 和 must_not。 must&#xff1a; 这个条件是必须满足的。比如&#xff0c;你想找一本关于 Python 编程的书&#xff0c;那么你会在 must 里写上关键词 “Python”。 should&#xff1a; 这相当于你的偏好条件&#xff0c;…

OpenVAS 数据库管理

数据库概述为了更好地理解OpenVAS数据库管理&#xff0c;我们首先需要了解数据库的概念。数据库是一个组织和存储数据的软件系统&#xff0c;它允许用户在其中存储、访问和更新数据。在计算机系统中&#xff0c;数据库通常是用来存储大量数据的一个集合&#xff0c;这些数据可以…

Web前端-JavaScript(对象)

文章目录 1.对象1.1 概念1.2 创建对象三种方式**对象字面量创建对象**&#xff1a;new Object创建对象构造函数创建对象 1.3 遍历对象 2.作用域1.1 概述1.2 全局作用域1.3 局部作用域1.4 JS没有块级作用域1.5 变量的作用域1.6 作用域链1.7 预解析 1.对象 1.1 概念 什么是对象 …

Solon 开源框架,单月下载突破 250 万!!!

Solon 是什么开源项目&#xff1f; 一个&#xff0c;Java 生态型应用开发框架。它从零开始构建&#xff0c;有自己的标准规范与开放生态&#xff08;历时六年&#xff0c;已有全球第二级别的生态规模&#xff09;。与其他框架相比&#xff0c;它解决了两个重要的痛点&#xff…

jetbrains idea 报错 java.lang.ClassNotFoundException 之后自动搜索包导入包

-- 搜索类所在的包 导入包 搜索包 mac环境 pom中右键或者 cmdn

shell 的错误处理和调试方法

简介 在我们写代码过程中&#xff0c;一般有两个阶段&#xff1a;调试阶段和试运行阶段。在调试阶段我们希望尽可能的输出日志&#xff0c;方便在出错的时候快速定位问题。在试运行阶段希望将日志标准化&#xff0c;且有些错误的日志是在预期内不想展示的时候如何处理&#xff…

1. 线程概述、线程和进程、 并发和并行、多线程的优势 、程序运行原理 、主线程、 线程的 6 种状态

文章目录 1. 线程概述1.1 线程和进程1.2 并发和并行1.3 多线程的优势1.4 程序运行原理1.5 主线程 1.6 线程的 6 种状态 1. 线程概述 1.1 线程和进程 ​ 进程是处于运行过程中的程序&#xff0c;并且具有一定的独立功能&#xff0c;进程是系统进行资源分配和调度的一个独立单位…

高校/企业如何去做数据挖掘呢?

随着近年来人工智能及大数据、云计算进入爆发时期&#xff0c;依托三者进行的数据分析、数据挖掘服务已逐渐成为各行业进行产业升级的载体&#xff0c;缓慢渗透进我们的工作和生活&#xff0c;成为新时代升级版的智能“大案牍术”。 那么对于多数企业来说&#xff0c;如何做数据…

将遗留系统分解为微服务:第 2 部分

在当今不断发展的技术环境中&#xff0c;从整体架构向微服务的转变对于许多企业来说都是一项战略举措。这在报销计算系统领域尤其重要。正如我在上一篇文章第 1 部分应用 Strangler 模式将遗留系统分解为微服务-CSDN博客中提到的&#xff0c;让我们探讨如何有效管理这种转变。 …

Kylin的工作原理及使用分享:构建大数据分析之塔

学习目标&#xff1a; 了解Kylin的工作原理和基本概念理解Kylin在大数据分析中的作用和价值学会使用Kylin进行数据建模、数据预处理和查询 学习内容&#xff1a; 什么是Kylin&#xff1f; Kylin是一个开源的分布式分析引擎&#xff0c;专注于大数据的实时多维分析。它能够通过…

Appium Server 启动失败常见原因及解决办法

Error: listen EADDRINUSE: address already in use 0.0.0.0:4723 如下图&#xff1a; 错误原因&#xff1a;Appium 默认的4723端口被占用 解决办法&#xff1a; 出现该提示&#xff0c;有可能是 Appium Server 已启动&#xff0c;关闭已经启动的 Appium Server 即可。472…

Python---案例-多任务版TCP服务端程序开发

1. 需求 目前我们开发的TCP服务端程序只能服务于一个客户端&#xff0c;如何开发一个多任务版的TCP服务端程序能够服务于多个客户端呢? 完成多任务&#xff0c;可以使用线程&#xff0c;比进程更加节省内存资源。 2. 具体实现步骤 编写一个TCP服务端程序&#xff0c;循环等…