CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%；

CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%;

关键是background-size:100% 100%;

background-size:100% 100%; 

background-size:100% 100%;
  • background-size:contain; 保持纵横比, 容器部分可能空白
  • background-size:cover; 保持纵横比, 图像可能指显示部分
  • background-size:100% 100%; 不保持纵横比, 背景图像拉扯为和容器一样宽高,这才是想要的!!!, 好多AI回答的都是垃圾!

测试代码:

<!DOCTYPE html><html lang="zh-CN" dir="ltr"><head ><meta charset='utf-8'/><title>CSS的background-size测试</title></head><body><fieldset><legend>原图, img标签默认自动适应图片大小</legend><img src="./200x200测试用黑底图片_2024-02-17_02-47-58.png"/></fieldset><fieldset><legend>img标签在属性中指定尺寸,  width=300 height=100</legend><img width=300 height=100 src="./200x200测试用黑底图片_2024-02-17_02-47-58.png"/></fieldset><fieldset><legend>img标签在style中指定尺寸,  style="width:300px; height:100px; " </legend><img style="width:300px; height:100px; " src="./200x200测试用黑底图片_2024-02-17_02-47-58.png"/></fieldset><fieldset><legend>background-size:cover, 没有background-repeat</legend><div style="width: 300px;height: 100px;border: 1px solid black;background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-size:cover;" ></div>
</fieldset><fieldset><legend>background-size:contain, 没有background-repeat</legend><div style="width: 300px;height: 100px;border: 1px solid black;background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-size:contain;" ></div>
</fieldset><fieldset><legend>background-size:100% 100%, 没有background-repeat</legend><div style="width: 300px;height: 100px;border: 1px solid black;background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-size:100% 100%;" ></div>
</fieldset><fieldset><legend>background-size:cover, background-repeat: no-repeat;</legend><div style="width: 300px;height: 100px;border: 1px solid black;background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-size:cover;background-repeat: no-repeat;" ></div>
</fieldset><fieldset><legend>background-size:contain, background-repeat: no-repeat;</legend><div style="width: 300px;height: 100px;border: 1px solid black;background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-size:contain;background-repeat: no-repeat;" ></div>
</fieldset><fieldset><legend>background-size:100% 100%, background-repeat: no-repeat;</legend><div style="width: 300px;height: 100px;border: 1px solid black;background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-size:100% 100%;background-repeat: no-repeat;" ></div>
</fieldset><fieldset><legend>background-size:cover, 没有background-repeat, background-position:center center;</legend><div style="width: 300px;height: 100px;border: 1px solid black;background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-size:cover;background-position:center center;" ></div>
</fieldset><fieldset><legend>background-size:contain, 没有background-repeat, background-position:center center;</legend><div style="width: 300px;height: 100px;border: 1px solid black;background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-size:contain;background-position:center center;" ></div>
</fieldset><fieldset><legend>background-size:100% 100%, 没有background-repeat, background-position:center center;</legend><div style="width: 300px;height: 100px;border: 1px solid black;background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-size:100% 100%;background-position:center center;" ></div>
</fieldset><fieldset><legend>background-size:cover, background-repeat: no-repeat;, background-position:center center;</legend><div style="width: 300px;height: 100px;border: 1px solid black;background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-size:cover;background-repeat: no-repeat;background-position:center center;" ></div>
</fieldset><fieldset><legend>background-size:contain, background-repeat: no-repeat;, background-position:center center;</legend><div style="width: 300px;height: 100px;border: 1px solid black;background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-size:contain;background-repeat: no-repeat;background-position:center center;" ></div>
</fieldset><fieldset><legend>background-size:100% 100%, background-repeat: no-repeat;, background-position:center center;</legend><div style="width: 300px;height: 100px;border: 1px solid black;background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-size:100% 100%;background-repeat: no-repeat;background-position:center center;" ></div>
</fieldset><footer style="height:100px; "></footer></body></html>

在这里插入图片描述

模板1
.element {/* 设置元素的宽度和高度 */width: 200px;height: 150px;/* 设置背景图片 */background-image: url('your-image.jpg');/* 设置背景图片大小以适应元素 *//*background-size: contain; /* 保持高宽比,可能出现空白 *//*background-size: cover; /* 保持高宽比, 超出部分看不到 */background-size: 100% 100%   /* 不保持高宽比, 如同img默认 *//* 其他背景属性，如需要的话 */background-position: center center; /* 背景图片位置 */background-repeat: no-repeat; /* 不重复背景图片 */
}



以下是一些搜索来的,用于参考

在CSS中，你可以使用background-size属性来控制背景图片的大小，使其自动适应元素的大小。background-size属性有几个可选的值，其中最常用的是cover和contain。

  • cover：此值将使背景图像完全覆盖内容区域，同时保持其宽高比。如果元素的宽高比与图像的宽高比不匹配，图像将被剪裁以适应元素。
  • contain：此值将使背景图像完全适应内容区域，可能会留下一些空白空间。图像将被缩放以最大程度地填充元素，同时保持其原始的宽高比。

以下是一个示例，展示如何使用background-size属性使背景图片自动适应元素的大小：

.element {/* 设置元素的宽度和高度 */width: 200px;height: 150px;/* 设置背景图片 */background-image: url('your-image.jpg');/* 设置背景图片大小以适应元素 */background-size: contain; /*  或者使用 'cover' *//* 其他背景属性，如需要的话 */background-position: center; /* 背景图片位置 */background-repeat: no-repeat; /* 不重复背景图片 */
}

在上面的示例中，.element类定义了一个元素的样式，该元素具有指定的宽度和高度，并设置了背景图片。background-size: cover;确保背景图片覆盖整个元素，同时保持其原始的宽高比。如果你希望背景图片完全包含在元素内，而不是覆盖它，你可以将cover替换为contain。

记得替换url('your-image.jpg')中的your-image.jpg为你实际要使用的图片路径。



在CSS中，要使背景图片自动适应元素的大小，你可以使用background-size属性，并为其设置适当的值。最常用的值是cover和contain，它们分别有不同的行为：

  • cover：背景图片将被缩放以完全覆盖元素的内容区域，同时保持图片的宽高比。这可能会导致图片的某些部分在元素框内不可见，因为图片会被裁剪以适应元素的尺寸。

  • contain：背景图片将被缩放以完全适应元素的内容区域，同时保持图片的宽高比。这可能会导致元素的某些部分没有背景图片覆盖，因为图片会按照其原始比例缩放至最大尺寸，但不会超出元素的边界。

下面是一个使用background-size属性使背景图片自动适应元素大小的CSS示例：

.element {/* 设置元素的宽度和高度 */width: 300px;height: 200px;/* 设置背景图片 */background-image: url('path-to-your-image.jpg');/* 设置背景图片以覆盖整个元素 */background-size: cover; /* 如果想要图片完全包含在元素内，则使用 'contain' *//* 设置背景图片的位置（可选） */background-position: center center; /* 图片居中显示 *//* 设置背景图片不重复（可选，但通常与cover或contain一起使用） */background-repeat: no-repeat;/* 其他样式（可选） */background-color: #f0f0f0; /* 如果图片加载失败或未完全覆盖时显示的背景色 */
}

在上面的CSS样式中，.element是你想要应用背景图片的元素的类名。你需要将url('path-to-your-image.jpg')中的路径替换为你实际的图片路径。

background-position属性用于控制背景图片在元素内的位置，这里设置为center center意味着图片将在水平和垂直方向上都居中显示。

background-repeat属性设置为no-repeat确保背景图片不会平铺（重复）以填充元素。这是在使用cover或contain时通常需要的设置，因为这两个值的目的就是让图片按比例缩放以适应元素的大小。

background-color属性是可选的，它定义了一个背景色，这在图片加载失败或图片未能完全覆盖元素时很有用。



CSS的background属性可以用来设置元素的背景图片。要使背景图片自动适应元素大小，可以使用background-size属性。

以下是两个例子来演示如何使背景图片自动适应元素大小：

  1. 使用contain值
<style type="text/css">
.wrap {width: 300px;height: 300px;border: 1px solid green;background-image: url(img/image.png);background-repeat: no-repeat;background-position: center center;background-size: contain;
}
</style>
<div class="wrap"></div>

在这个例子中，background-size属性被设置为contain，这将使背景图片在保持其原始比例的同时，尽可能地适应元素的大小。背景图片将被缩放以适应元素的宽度或高度，但不会超出元素的边界。

  1. 使用cover值
<style type="text/css">
.wrap {width: 300px;height: 300px;border: 1px solid green;background-image: url(img/image.png);background-repeat: no-repeat;background-position: center center;background-size: cover;
}
</style>
<div class="wrap"></div>

在这个例子中，background-size属性被设置为cover，这将使背景图片完全覆盖元素，并保持其原始比例。背景图片将被缩放以适应元素的宽度或高度，以便完全覆盖元素的边界。这可能会导致图片的某些部分被裁剪掉。



在CSS中，要让背景图片自动适应元素大小，你可以使用background-size属性。background-size属性允许你控制背景图片的大小。有几种可能的值：

  1. auto：这是默认值，背景图片将保持其原始尺寸。
  2. cover：背景图片将被拉伸以覆盖整个元素，同时保持其纵横比。可能会有部分图片在元素区域之外不可见。
  3. contain：背景图片将被缩放以完全适应元素的内容区域，可能留下一些空白空间。
  4. <length>和<percentage>：你可以指定一个具体的长度值（如px、em等）或一个百分比，来定义背景图片的大小。

要使背景图片自动适应元素大小，通常推荐使用cover或contain值。以下是一个例子，展示如何使用cover值：

.element {background-image: url('your-image.jpg');background-size: cover;background-position: center; /* 可选，使图片居中显示 */background-repeat: no-repeat; /* 可选，防止图片重复 */
}

在这个例子中，.element是一个CSS类，你可以将其应用到你想要添加背景图片的HTML元素上。background-image属性设置了背景图片的路径，background-size: cover;使背景图片覆盖整个元素，并保持其纵横比。background-position: center;和background-repeat: no-repeat;是可选的属性，用于进一步控制背景图片的显示。



















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

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

相关文章

解锁Spring Boot中的设计模式—02.解释器模式：探索【解释器模式】的奥秘与应用实践！

解锁Spring Boot中的设计模式—02.解释器模式：探索【解释器模式】的奥秘与应用实践！

解释器模式 1.简介 解释器模式&#xff08;Interpreter Pattern&#xff09;是一种行为设计模式&#xff0c;它用于定义语言的文法&#xff0c;并且解释语言中的表达式。在Java中&#xff0c;解释器模式可以用于构建解释器以解析特定的语言或表达式&#xff0c;如数学表达式、…
阅读更多...
C++面试宝典第28题：寻找丢失的数字

C++面试宝典第28题：寻找丢失的数字

题目 给定一个包含n个整数的数组nums，其中nums[i]在区间[1, n]内。请找出所有在[1, n]范围内，但没有出现在nums中的数字，并以数组的形式返回结果。 示例1： 输入：nums = [4, 3, 2, 7, 8, 2, 3, 1] 输出：[5, 6] 示例2： 输入：nums = [1, 1] 输出：[2] 解析 初看这道题，…
阅读更多...
【lesson57】信号量和生产者消费者模型（环形队列版）

【lesson57】信号量和生产者消费者模型（环形队列版）

文章目录 信号量概念信号量接口初始化销毁等待发布 基于环形队列的生产者消费者模型编码Common.hLockGuard.hppTask.hppsem.hppRingQueue.hppConProd.cc 信号量概念 POSIX信号量和SystemV信号量作用相同&#xff0c;都是用于同步操作&#xff0c;达到无冲突的访问共享资源目的…
阅读更多...
【测试】JUnit

【测试】JUnit

目 录 一.注解二.断言三.用例的执行顺序四.参数化五.测试套件 自动化就是 selenium 脚本来实现的 junit 是 java 的单亓测试工具&#xff0c;只不过我们在实现自动化的时候需要借用一下下 junit 库里面提供的一些方法 引入依赖 Junit 5 <!-- https://mvnrepository.com/a…
阅读更多...
自然语言编程系列（二）：自然语言处理（NLP）、编程语言处理（PPL）和GitHub Copilot X

自然语言编程系列（二）：自然语言处理（NLP）、编程语言处理（PPL）和GitHub Copilot X

编程语言处理的核心是计算机如何理解和执行预定义的人工语言&#xff08;编程语言&#xff09;&#xff0c;而自然语言处理则是研究如何使计算机理解并生成非正式、多样化的自然语言。GPT-4.0作为自然语言处理技术的最新迭代&#xff0c;其编程语言处理能力相较于前代模型有了显…
阅读更多...
电子元器件基础5---二极管

电子元器件基础5---二极管

除了电阻、电容和电感等线性元器件之外，还有二极管、三极管这些常用的非线性器件广泛应用于日常生活中。那么今天我们来介绍以下二极管这一常用的电子元器件。 一、二极管概念 二极管是用半导体材料(硅、硒、锗等)制成的一种电子器件 。二极管有两个电极，正极，又叫阳极；负…
阅读更多...
django报错：Cannot use ImageField because Pillow is not installed

django报错：Cannot use ImageField because Pillow is not installed

1、问题概述 ERRORS: accounts.User.avatar: (fields.E210) Cannot use ImageField because Pillow is not installed. HINT: Get Pillow at https://pypi.org/project/Pillow/ or run command "python -m pip install Pillow". System check identified 1 …
阅读更多...
JDK1.8安装教程

JDK1.8安装教程

目录 下载安装环境配置打开系统高级设置环境配置 验证安装是否成功 下载 https://www.oracle.com/java/technologies/downloads/#java8-windows 安装 打开安装包&#xff0c;点击下一步。 选择好自己熟悉的目的安装目录&#xff0c;点击下一步。 等待安装 选择好jre的安装目…
阅读更多...
ubuntu22.04@laptop OpenCV Get Started: 013_contour_detection

ubuntu22.04@laptop OpenCV Get Started: 013_contour_detection

ubuntu22.04laptop OpenCV Get Started: 013_contour_detection 1. 源由2. 应用Demo2.1 C应用Demo2.2 Python应用Demo 3. contour_approx应用3.1 读取图像并将其转换为灰度格式3.2 应用二进制阈值过滤算法3.3 查找对象轮廓3.4 绘制对象轮廓3.5 效果3.6 CHAIN_APPROX_SIMPLE v.s…
阅读更多...
java中的枚举

java中的枚举

枚举 枚举类型的概述 关键字&#xff1a;enum 你可以把枚举类型理解成是一个自定义的常量的序列 枚举的语法结构 定义的枚举类型文件 package com.it.xiaosi.demo01;/*** Classname : direction* Description : TODO 枚举* Author : lin_refuelqq.com*/ public enum direct…
阅读更多...
springboot第56集：微服务框架，物联网IOT，SQL数据库MySQL底层，AOP收集业务操作日志架构周刊...

springboot第56集：微服务框架，物联网IOT，SQL数据库MySQL底层，AOP收集业务操作日志架构周刊...

单点登录 1.配置代理信息 /*请求登陆的方法*/ "/modelLogin": {//本地服务接口地址&#xff0c;这是测试环境&#xff0c;正式环境需要更改下地址target: "http://127.0.0.1:6776/xxx-auth/",changeOrigin: true,pathRewrite: {"^/modelLogin": …
阅读更多...
在ubuntu中制作ubuntu的U盘启动盘

在ubuntu中制作ubuntu的U盘启动盘

概要&#xff1a; 本篇演示在ubuntu22.04中制作ubuntu22.04的U盘启动盘 一、下载ubuntu22.04的iso文件 访问ubuntu官网https://ubuntu.com自行下载ubuntu官网 二、制作U盘启动盘 打开系统自带软件Startup Disk Creator 软件会自动检测iso文件和U盘 点击Make Startup Disk…
阅读更多...
【Java EE初阶十二】网络原理（二）

【Java EE初阶十二】网络原理（二）

2. 传输层 2.2 TCP协议 2.2.2 关于可靠传输 4.滑动窗口 前面的三个机制&#xff0c;都是在保证 tcp 的可靠性&#xff1b; TCP 的可靠传输,是会影响传输的效率的.(多出了一些等待 ack 的时间,单位时间内能传输的数据就少了)&#xff1b; 滑动窗口,就让可靠传输对性能的影响,更…
阅读更多...
MySQL数据库⑪_C/C++连接MySQL_发送请求

MySQL数据库⑪_C/C++连接MySQL_发送请求

目录 1. 下载库文件 2. 使用库 3. 链接MySQL函数 4. C/C链接示例 5. 发送SQL请求 6. 获取查询结果 本篇完。 1. 下载库文件 要使用C/C连接MySQL&#xff0c;需要使用MySQL官网提供的库。 进入MySQL官网选择适合自己平台的mysql connect库&#xff0c;然后点击下载就行…
阅读更多...
Day-02-02

Day-02-02

Httpclient测试 安装HTTP Client插件 使用IDEA自带的http接口测试工具——HTTP Client Open in HTTP Client 生成测试用例 点击绿色箭头可以运行测试用例&#xff0c;控制台会输出结果。 保存和修改测试用例 在模块下新建一个api-test包用来存放测试用例&#xff0c;将生…
阅读更多...
Packet content transfer stopped (received 8 bytes)

Packet content transfer stopped (received 8 bytes)

esp32烧录程序时报错&#xff1a;A fatal error occurred: Packet content transfer stopped (received 8 bytes) 解决方法&#xff1a; 降低上传速度&#xff0c;使用115200&#xff1b;更换flash模式&#xff0c;使用DIO方式重试如果还不行&#xff0c;检查flash连接情况&am…
阅读更多...
failing dimm dimm location (uncorrectable memory component found)

failing dimm dimm location (uncorrectable memory component found)

开机界面出现这个 failing dimm dimm location (uncorrectable memory component found)“DIMM DIMM location. Uncorrectable memory component found” 是一条硬件故障信息&#xff0c;表明在服务器的某个特定双列直插式内存模块&#xff08;Dual In-line Memory Module, DI…
阅读更多...
【漏洞复现】蓝网科技临床浏览系统信息泄露漏洞

【漏洞复现】蓝网科技临床浏览系统信息泄露漏洞

Nx01 产品简介 蓝网科技临床浏览系统是一个专门用于医疗行业的软件系统&#xff0c;主要用于医生、护士和其他医疗专业人员在临床工作中进行信息浏览、查询和管理。 Nx02 漏洞描述 蓝网科技临床浏览系统存在信息泄露漏洞&#xff0c;攻击者可以利用该漏洞获取敏感信息。 Nx03…
阅读更多...
深度学习基础之《TensorFlow框架（4）—Operation》

深度学习基础之《TensorFlow框架（4）—Operation》

一、常见的OP 1、举例 类型实例标量运算add&#xff0c;sub&#xff0c;mul&#xff0c;div&#xff0c;exp&#xff0c;log&#xff0c;greater&#xff0c;less&#xff0c;equal向量运算concat&#xff0c;slice&#xff0c;splot&#xff0c;canstant&#xff0c;rank&am…
阅读更多...
力扣72. 编辑距离（动态规划）

力扣72. 编辑距离（动态规划）

Problem: 72. 编辑距离 文章目录 题目描述思路复杂度Code 题目描述 思路 由于易得将字符串word1向word2转换和word2向word1转换是等效的&#xff0c;则我们假定统一为word1向word2转换&#xff01;&#xff01;&#xff01; 1.确定状态&#xff1a;我们假设现在有下标i&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023