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

news2024/12/26 22:19:25

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.coloradmin.cn/o/1451985.html

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

相关文章

紫微斗数双星组合：天机太阴在寅申

紫微斗数双星组合：天机太阴在寅申

文章目录 前言内容总结 前言 紫微斗数双星组合&#xff1a;天机太阴在寅申 内容 紫微斗数双星组合&#xff1a;天机太阴在寅申 性格分析 天机星与太阴星同坐寅申二宫守命的男性&#xff0c;多浪漫&#xff0c;易与女性接近&#xff0c;温柔体贴&#xff0c;懂得女人的心理。…
阅读更多...
Java与JavaScript同源不同性

Java与JavaScript同源不同性

Java是目前编程领域使用非常广泛的编程语言&#xff0c;相较于JavaScript&#xff0c;Java更被人们熟知。很多Java程序员想学门脚本语言&#xff0c;一看JavaScript和Java这么像&#xff0c;很有亲切感&#xff0c;那干脆就学它了&#xff0c;这也间接的帮助了JavaScript的发展…
阅读更多...
持久化：Linux利用SUID、任务计划、vim进行权限维持

持久化：Linux利用SUID、任务计划、vim进行权限维持

目录 利用Linux SUID进行权限维持 利用Linux计划任务进行权限维持 利用Vim创建后门 利用CVE-2019-12735进行权限维持 使用Vim运行Python后门程序 利用Linux SUID进行权限维持 在前面我们使用Linux的SUID权限进行了权限提升&#xff0c;然后SUID还可以用来进行持久化 利用…
阅读更多...
docker （四）-docker网络

docker （四）-docker网络

默认网络 docker会自动创建三个网络&#xff0c;bridge,host,none bridge桥接网络 如果不指定&#xff0c;新创建的容器默认将连接到bridge网络。 默认情况下&#xff0c;使用bridge网络&#xff0c;宿主机可以ping通容器ip&#xff0c;容器中也能ping通宿主机。 容器之间只…
阅读更多...
[Android]Frida-hook环境配置

[Android]Frida-hook环境配置

准备阶段 反编译工具:Jadx能够理解Java语言能编写小型的JavaScript代码连接工具:adb设备:Root的安卓机器&#xff0c;或者模拟器 Frida&#xff08;https://frida.re/&#xff09; 就像是你计算机或移动设备的妙妙工具。它帮助你查看其他程序或应用内部发生的事情&#xff0…
阅读更多...
云计算基础-网络虚拟化

云计算基础-网络虚拟化

虚拟交换机 什么是虚拟交换机 虚拟交换机是一种运行在虚拟化环境中的网络设备&#xff0c;其运行在宿主机的内存中&#xff0c;通过软件方式在宿主机内部实现了部分物理交换机的功能&#xff0c;如 VLAN 划分、流量控制、QoS 支持和安全功能等网络管理特性 虚拟交换机在云平…
阅读更多...
java8-用流收集数据-6

java8-用流收集数据-6

本章内容口用co1lectors类创建和使用收集器 口将数据流归约为一个值 口汇总:归约的特殊情况 数据分组和分区口 口 开发自己的自定义收集器 我们在前一章中学到&#xff0c;流可以用类似于数据库的操作帮助你处理集合。你可以把Java8的流看作花哨又懒惰的数据集迭代器。它们…
阅读更多...
SQL-Labs靶场“6-10”关通关教程

SQL-Labs靶场“6-10”关通关教程

君衍. 一、第六关 基于GET的双引号报错注入1、源码分析2、floor报错注入3、updatexml报错注入 二、第七关 基于文件写入注入1、源码分析2、outfile注入过程 三、第八关 基于GET单引号布尔盲注1、源码分析2、布尔盲注&#xff08;脚本&#xff09;2、布尔盲注&#xff08;手工&a…
阅读更多...
多线程 --- 线程互斥

多线程 --- 线程互斥

目录 1. 线程互斥 1.1. 相关背景概念 1.2. 互斥锁 1.2.1. 初始化互斥量 1.2.2. 销毁互斥量 1.2.3. 互斥量加锁 && 解锁 1.3. 互斥量 (锁) 的原理 1.3.2. 相关问题和解释 1.3.2. 锁的实现原理 1.3.3. 可重入 && 线程安全问题 1.3.4. 常见的线程不安全…
阅读更多...
循序渐进-讲解Markdown进阶（Mermaid绘图）-附使用案例

循序渐进-讲解Markdown进阶（Mermaid绘图）-附使用案例

Markdown 进阶操作 查看更多学习笔记&#xff1a;GitHub&#xff1a;LoveEmiliaForever Mermaid官网 由于CSDN对某些Mermaid或Markdown语法不支持&#xff0c;因此我的某些效果展示使用图片进行 下面的笔记内容全部是我根据Mermaid官方文档学习的&#xff0c;因为是初学者所以…
阅读更多...
OpenAI Sora是世界模型？

OpenAI Sora是世界模型？

初见Sora&#xff0c;我被OpenAI的野心震撼了。 他们不仅想教会AI理解视频&#xff0c;还要让它模拟整个物理世界&#xff01;这简直是通用人工智能的一大飞跃。 但当我深入了解后&#xff0c;我发现Sora比我想象的更复杂、更强大。 Sora不是简单的创意工具&#xff0c;而是…
阅读更多...
十五、Object 类

十五、Object 类

文章目录 Object 类6.1 public Object()6.2 toString方法6.3 hashCode和equals(Object)6.4 getClass方法6.5 clone方法6.6 finalize方法 Object 类 本文为书籍《Java编程的逻辑》1和《剑指Java&#xff1a;核心原理与应用实践》2阅读笔记 java.lang.Object类是类层次结构的根…
阅读更多...
Html的＜figure＞＜figcaption＞标签

Html的＜figure＞＜figcaption＞标签

Html的<figure><figcaption>标签 示例一: <figure><figcaption>figcaption001, fig标题1 </figcaption><figcaption>figcaption002, fig标题2 </figcaption><div style"width:calc(100px*2); height:calc(100px*2); back…
阅读更多...
用HTML、CSS和JS打造绚丽的雪花飘落效果

用HTML、CSS和JS打造绚丽的雪花飘落效果

目录 一、程序代码 二、代码原理 三、运行效果 一、程序代码 <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html; charsetGBK"><style>* {margin: 0;padding: 0;}#box {width: 100vw;heig…
阅读更多...
微服务学习Day3

微服务学习Day3

文章目录 初始DockerDocker介绍Docker与虚拟机镜像和容器 Docker的基本操作镜像操作容器命令数据卷挂载数据卷 Dockerfile自定义镜像Docker-Compose介绍Docker-Compose部署微服务镜像仓库 初始Docker Docker介绍 Docker与虚拟机 镜像和容器 Docker的基本操作 镜像操作 容器命…
阅读更多...
Pandas Series Mastery: 从基础到高级应用的完整指南【第83篇—Series Mastery】

Pandas Series Mastery: 从基础到高级应用的完整指南【第83篇—Series Mastery】

Pandas Series Mastery: 从基础到高级应用的完整指南 Pandas是Python中一流的数据处理库&#xff0c;它为数据科学家和分析师提供了强大的工具&#xff0c;简化了数据清理、分析和可视化的流程。在Pandas中&#xff0c;Series对象是最基本的数据结构之一&#xff0c;它为我们处…
阅读更多...
MATLAB知识点：datasample函数（★★☆☆☆）随机抽样的函数，能对矩阵数据进行随机抽样

MATLAB知识点：datasample函数（★★☆☆☆）随机抽样的函数，能对矩阵数据进行随机抽样

讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 节选自第3章&#xff1a;课后习题讲解中拓展的函数 在讲解第三…
阅读更多...
Ubuntu Desktop 显示文件路径

Ubuntu Desktop 显示文件路径

Ubuntu Desktop 显示文件路径 1. GUI hot key2. CLIReferences 1. GUI hot key Ctrl L: 显示文件路径 2. CLI right click -> Open in Terminal -> pwd strongforeverstrong:~/Desktop$ pwd /home/strong/DesktopReferences [1] Yongqiang Cheng, https://yongqiang…
阅读更多...
Leetcode1686. 石子游戏 VI

Leetcode1686. 石子游戏 VI

Every day a Leetcode 题目来源&#xff1a;1686. 石子游戏 VI 解法1&#xff1a;贪心 排序 贪心的思想&#xff1a; 这道题模拟一个石子游戏&#xff0c;求解最后的比赛结果。 题目说两位玩家都会采用 最优策略 进行游戏&#xff0c;那么关键点就在于什么是最优策略&…
阅读更多...
docker （五）-docker存储-数据持久化

docker （五）-docker存储-数据持久化

将数据存储在容器中&#xff0c;一旦容器被删除&#xff0c;数据也会被删除。同时也会使容器变得越来越大&#xff0c;不方便恢复和迁移。 将数据存储到容器之外&#xff0c;这样删除容器也不会丢失数据。一旦容器故障&#xff0c;我们可以重新创建一个容器&#xff0c;将数据挂…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023