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

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

2024-04-07 08:04:09 前端知识 前端哥 122 841 我要收藏

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属性有几个可选的值,其中最常用的是covercontain

  • 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属性,并为其设置适当的值。最常用的值是covercontain,它们分别有不同的行为:

  • 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确保背景图片不会平铺(重复)以填充元素。这是在使用covercontain时通常需要的设置,因为这两个值的目的就是让图片按比例缩放以适应元素的大小。

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>:你可以指定一个具体的长度值(如pxem等)或一个百分比,来定义背景图片的大小。

要使背景图片自动适应元素大小,通常推荐使用covercontain值。以下是一个例子,展示如何使用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;是可选的属性,用于进一步控制背景图片的显示。



















转载请注明出处或者链接地址:https://www.qianduange.cn//article/4512.html
标签
评论
发布的文章

java解析超大json文件数据

2024-04-19 21:04:10

头歌-JavaScript基础

2024-04-19 21:04:54

C#Json序列化及反序列化

2024-04-19 21:04:40

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!