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.mfbz.cn/a/390400.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

自动更改由VSCode调试器创建的默认launch.json文件

自动更改由VSCode调试器创建的默认launch.json文件

File -> Preference -> Settings 修改下面的部分
阅读更多...
文生视频：Sora模型报告总结

文生视频：Sora模型报告总结

作为世界模拟器的视频生成模型 我们探索视频数据生成模型的大规模训练。具体来说&#xff0c;我们在可变持续时间、分辨率和宽高比的视频和图像上联合训练文本条件扩散模型。我们利用对视频和图像潜在代码的时空补丁进行操作的变压器架构。我们最大的模型 Sora 能够生成一分钟…
阅读更多...
AJAX——AJAX入门

AJAX——AJAX入门

1 什么是AJAX&#xff1f; Ajax&#xff08;Asynchronous JavaScript and XML&#xff09;是一种用于在Web应用程序中实现异步通信的技术。 简单点说&#xff0c;就是使用XMLHttpRequest对象与服务器通信。它可以使用JSON、XML、HTML和test文本等格式发送和接收数据。 AJAX最吸…
阅读更多...
JavaWeb之Servlet接口

JavaWeb之Servlet接口

Servlet接口 什么是Servlet&#xff1f; Servlet是一种基于Java技术的Web组件&#xff0c;用于生成动态内容&#xff0c;由容器管理&#xff0c;是平台无关的Java类组成&#xff0c;并且由Java Web服务器加载执行&#xff0c;是Web容器的最基本组成单元 什么是Servlet容器&…
阅读更多...
2.13日学习打卡----初学RocketMQ（四）

2.13日学习打卡----初学RocketMQ（四）

2.13日学习打卡 目录&#xff1a; 2.13日学习打卡一.RocketMQ之Java ClassDefaultMQProducer类DefaultMQPushConsumer类Message类MessageExt类 二.RocketMQ 消费幂消费过程幂等消费速度慢的处理方式 三.RocketMQ 集群服务集群特点单master模式多master模式多master多Slave模式-…
阅读更多...
【研究生复试】计算机软件工程人工智能研究生复试——资料整理（速记版）——数据库

【研究生复试】计算机软件工程人工智能研究生复试——资料整理（速记版）——数据库

1、JAVA 2、计算机网络 3、计算机体系结构 4、数据库 5、计算机租场原理 6、软件工程 7、大数据 8、英文 自我介绍 4. 数据库 1. B树相对于B树的区别及优势 B树中有重复元素&#xff0c;B树没有重复元素B树种每个节点都存储了key和data&#xff0c;B树内节点去掉了其中指向数…
阅读更多...
数学实验第三版（主编：李继成 赵小艳）课后练习答案（十一）（1）（2）（3）

数学实验第三版（主编：李继成 赵小艳）课后练习答案（十一）（1）（2）（3）

目录 实验十一&#xff1a;非线性方程&#xff08;组&#xff09;求解 练习一 练习二 练习三 实验十一&#xff1a;非线性方程&#xff08;组&#xff09;求解 练习一 1.求莱昂纳多方程 的解 clc;clear; p[1,2,10,-20]; roots(p)ans -1.6844 3.4313i -1.6844 - 3.4313i…
阅读更多...
数据结构与算法：二叉树（寻找最近公共祖先、寻找后继节点、序列化和反序列化、折纸问题的板子和相关力扣题目）

数据结构与算法：二叉树（寻找最近公共祖先、寻找后继节点、序列化和反序列化、折纸问题的板子和相关力扣题目）

最近公共祖先 第一版&#xff08;前提&#xff1a;p和q默认存在于这棵树中&#xff09; 可以层序遍历每个节点时用个HashMap存储该结点和其直接父节点的信息。然后从p开始溯源&#xff0c;将所有的父节点都添加到一个HashSet集合里。然后从q开始溯源&#xff0c;每溯源一步看…
阅读更多...
题目：3.神奇的数组（蓝桥OJ 3000）

题目：3.神奇的数组（蓝桥OJ 3000）

问题描述&#xff1a; 解题思路&#xff1a; 官方&#xff1a; 我的总结&#xff1a; 利用双指针遍历每个区间并判断是否符合条件&#xff1a;若一个区间符合条件则该区间在其左端点不变的情况下的每一个子区间都符合条件&#xff0c;相反若一个区间内左端点固定情况下有一个以…
阅读更多...
ssm的网上招聘系统（有报告）。Javaee项目。ssm项目。

ssm的网上招聘系统（有报告）。Javaee项目。ssm项目。

演示视频&#xff1a; ssm的网上招聘系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring SpringMv…
阅读更多...
什么是位段？位段的作用是什么？他与结构体有什么关系？

什么是位段？位段的作用是什么？他与结构体有什么关系？

目录 1.什么是位段&#xff1f; 2.位段的内存分配 判断当前机器位段的内存分配形式 1.什么是位段&#xff1f; 位段的声明和结构是类似的&#xff0c;有两个不同&#xff1a; 1.位段的成员必须是 int、unsigned int 或signed int或char 。 2.位段的成员名后边有一个冒号和…
阅读更多...
Leetcode3010. 将数组分成最小总代价的子数组 I

Leetcode3010. 将数组分成最小总代价的子数组 I

Every day a Leetcode 题目来源&#xff1a;3010. 将数组分成最小总代价的子数组 I 题目描述&#xff1a; 给你一个长度为 n 的整数数组 nums 。 一个数组的代价是它的第一个元素。比方说&#xff0c;[1,2,3] 的代价是 1 &#xff0c;[3,4,1] 的代价是 3 。 你需要将 num…
阅读更多...
C语言---指针进阶

C语言---指针进阶

1.字符指针 int main() {char str1[] "hello world";char str2[] "hello world";const char* str3 "hello world.";const char* str4 "hello world.";if (str3 str4){//常量字符串在内存里面是无法修改的&#xff0c;所以没必要…
阅读更多...
“分布式透明化”在杭州银行核心系统上线之思考

“分布式透明化”在杭州银行核心系统上线之思考

导读 随着金融行业数字化转型的需求&#xff0c;银行核心系统的升级改造成为重要议题。杭州银行成功上线以 TiDB 为底层数据库的新一代核心业务系统&#xff0c;该实践采用应用与基础设施解耦、分布式透明化的设计开发理念&#xff0c;推动银行核心系统的整体升级。 本文聚焦…
阅读更多...
【Effective Objective - C 2.0】——读书笔记（五）

【Effective Objective - C 2.0】——读书笔记（五）

文章目录 二十九、理解引用计数三十、以ARC简化引用计数三十一、在dealloc方法中只释放引用并解除监听三十二、编写异常安全代码时留意内存管理问题三十三、以弱引用避免保留环三十四、以”自动释放池块“降低内存峰值三十五、用"僵尸对象"调试内存管理问题三十六、不…
阅读更多...
【C语言】实现队列

【C语言】实现队列

目录 &#xff08;一&#xff09;队列 &#xff08;二&#xff09;头文件 &#xff08;三&#xff09; 功能实现 &#xff08;1&#xff09;初始化 &#xff08;2&#xff09; 销毁队列 &#xff08;3&#xff09; 入队 &#xff08;4&#xff09;出队 &#xff08;5&a…
阅读更多...
论文阅读：四足机器人对抗运动先验学习稳健和敏捷的行走

论文阅读：四足机器人对抗运动先验学习稳健和敏捷的行走

论文&#xff1a;Learning Robust and Agile Legged Locomotion Using Adversarial Motion Priors 进一步学习&#xff1a;AMP&#xff0c;baseline方法&#xff0c;TO 摘要&#xff1a; 介绍了一种新颖的系统&#xff0c;通过使用对抗性运动先验 (AMP) 使四足机器人在复杂地…
阅读更多...
luigi，一个好用的 Python 数据管道库！

luigi，一个好用的 Python 数据管道库！

🏷️个人主页：鼠鼠我捏，要死了捏的主页 🏷️付费专栏：Python专栏 🏷️个人学习笔记，若有缺误，欢迎评论区指正 前言 大家好，今天为大家分享一个超级厉害的 Python 库 - luigi。 Github地址：https://github.com/spotify/luigi 在大数据时代，处理海量数据已经成…
阅读更多...
NVIDIA 刚刚揭秘了他们的最新大作——Eos，一台跻身全球十强的超级计算机

NVIDIA 刚刚揭秘了他们的最新大作——Eos，一台跻身全球十强的超级计算机

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
android获取sha1

android获取sha1

1.cmd在控制台获取 切换到Android Studio\jre\bin目录下执行keytool -list -v -keystore 签名文件路径例如&#xff1a; 2.也可以在android studio中获取 在Terminal中输入命令&#xff1a;keytool -list -v -keystore 签名文件路径获取 获取到的sha1如下&#xff1a;
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站