1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：kfepiza 分类：Toy博客 阅读(42) 违法举报

这篇具有很好参考价值的文章主要介绍了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>

css background 100,HTML CSS JS,css,前端

模板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; /* 不重复背景图片 */
}



文章来源地址https://www.toymoban.com/news/detail-828366.html

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

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



















到了这里，关于CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%；的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 一键去除图片背景——background-removal-js

    一键去除图片背景——background-removal-js

    一些JavaScript库和工具可以帮助实现背景去除： OpenCV.js：OpenCV的JavaScript版本，提供了许多计算机视觉功能，包括背景去除。 Jimp：一个用于处理图像的JavaScript库，提供了许多图像处理功能，包括背景去除。 Canvas：HTML5的Canvas API可用于在JavaScript中绘制和处理图像，包括背景去

    2024年01月23日
    浏览(57)
  • 给div添加背景图片时查看图片样式-设置background-size属性

    给div添加背景图片时查看图片样式-设置background-size属性

       

    2024年02月16日
    浏览(59)
  • uni-app - 实现全屏自适应且不变形背景大图，设置一张图片占满全屏（根据手机或电脑尺寸自动拉伸背景图像），用于页面是一张平铺的大图做背景的情况，全端兼容

    uni-app - 实现全屏自适应且不变形背景大图，设置一张图片占满全屏（根据手机或电脑尺寸自动拉伸背景图像），用于页面是一张平铺的大图做背景的情况，全端兼容

    网上的很多文章的教程都有一定问题，要么不会自动适应手机尺寸，要么写一堆 js 判断手机宽高，兼容性极差且代码臃肿。 在 uniapp全端兼容（h5网页 / 支付宝微信小程序 / 安卓苹果app / nvue 等全平台），经常遇到 H5 活动页、营销页、图片背景元素点缀等需求， 需要一张背景

    2024年02月17日
    浏览(231)
  • 【QT】 QLabel背景图片自适应窗口大小

    【QT】 QLabel背景图片自适应窗口大小

    这是最终效果： 想要图片跟随窗口自适应大小，首先我们先对QWidget进行网格布局，布局效果如下： 布局完成后添加 QLabel 代码，新建 QLabel 并且设置为可扩展内容，再设置图片放置最后面，否则图片在最前面会遮挡控件。 然后重写 qt 的绘画事件： 这是绘画事件的实现代码：

    2024年02月15日
    浏览(58)

  • CSS 设置背景图片

    一、基本设置 使用 CSS 可以通过以下属性设置背景图片： background-image : 设置背景图片的 URL。 background-size : 设置背景图片的大小。可以设置为绝对像素值，也可以设置为百分比或 \\\"cover\\\"（填充整个容器）或 \\\"contain\\\"（完整显示图片）。 background-repeat : 设置背景图片是否重复。可

    2024年02月12日
    浏览(48)

  • css图片背景

    在CSS中设置图片背景是通过 background-image 属性来实现的。以下是一种简单的方法来设置CSS图片背景： 1.准备图片文件：首先，准备你想要作为背景的图片，并确保它已经上传到你的网站或服务器上。 2.在HTML中添加一个元素：在HTML文件中，你可以添加一个元素（例如 div 或者其

    2024年02月14日
    浏览(45)

  • CSS-设置背景图片的大小

    要设置背景图片的大小，您可以使用CSS的 background-size 属性。这个属性允许您指定背景图片的尺寸。 background-size 属性可以接受不同的值，包括： auto ：保持原始图片的尺寸。 cover ：将图片缩放到完全覆盖背景区域，可能会裁剪部分图片。 contain ：将图片缩放到完全适应背景

    2024年01月25日
    浏览(48)
  • HTML--CSS--图片和背景样式

    HTML--CSS--图片和背景样式

    最基本的应该就是对大小的管理 width:像素值; 宽度 height:像素值; 高度 一样使用 border 进行定义 效果： 图片对齐和文本的对齐是一样的，也是用 text-align 进行，但需要注意不能直接在 img 定义，需要在父元素处定义 属性依然是： left 左对齐 center 居中 right 右对齐 效果： 用法

    2024年01月18日
    浏览(61)
  • CSS中如何实现元素的渐变背景（Gradient Background）效果？

    CSS中如何实现元素的渐变背景（Gradient Background）效果？

    前端入门之旅：探索Web开发的奇妙世界 欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者，这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月10日
    浏览(62)
  • CSS 圆形分割按钮动画 带背景、图片

    CSS 圆形分割按钮动画 带背景、图片

     

    2024年02月01日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包