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

kfepiza2024-02-18 14:21

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

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

background-size:100% 100%;

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

测试代码:

html 复制代码 
<!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
css 复制代码 
.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属性使背景图片自动适应元素的大小：

css 复制代码 
.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示例：

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值
html 复制代码 
<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值
html 复制代码 
<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值：

css 复制代码 
.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;是可选的属性，用于进一步控制背景图片的显示。

相关推荐
数据掘金9 分钟前
小程序埋点方案的埋点文档怎么自动生成？
前端
deli0079 分钟前
cron 表达式为什么总跑错？10 个场景实测，下次执行时间一眼看懂
前端
代码猎人13 分钟前
前端怎么优化页面性能
前端
代码猎人15 分钟前
前端怎么配合后端完成数据对接
前端
lexiangqicheng21 分钟前
Docker的沙箱机制是怎样的？
前端·javascript
燕落南枝1 小时前
HTML 表格标签与 AI 合并单元格实战指南
前端·人工智能·html
zyseo81 小时前
谷歌SEO 内链地图脚本：Python 画出权重分发，揪出孤岛页
java·前端·python
ClickHouseDB2 小时前
ClickHouse .NET 驱动程序新特性：从 1.0 到 1.3 的演进之路
java·前端·windows
bitbrowser2 小时前
Gmail注册要求手机号如何解决？哪些情况可以不填手机号
前端·指纹浏览器·gmail
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会03GitHub 镜像站点04历年考研数学一、数学二、数学三真题试卷及答案PDF05几个好用的ip纯净度检测网站06如何新建文件夹？ 电脑新建文件夹的4种方法07蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接08Telegram APK 下载安装完整指南 — 2026年最新09苹果iPA游戏软件资源下载网站10Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）