CSS的background 背景圖片自動適應(yīng)元素大小,實現(xiàn)img的默認(rèn)效果 background-size:100% 100%；

這篇具有很好參考價值的文章主要介紹了CSS的background 背景圖片自動適應(yīng)元素大小,實現(xiàn)img的默認(rèn)效果 background-size:100% 100%；。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

CSS的background 背景圖片自動適應(yīng)元素大小,實現(xiàn)img的默認(rèn)效果 background-size:100% 100%;

關(guān)鍵是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標(biāo)簽?zāi)J(rèn)自動適應(yīng)圖片大小</legend><img src="./200x200測試用黑底圖片_2024-02-17_02-47-58.png"/></fieldset>

<fieldset><legend>img標(biāo)簽在屬性中指定尺寸,  width=300 height=100</legend><img width=300 height=100 src="./200x200測試用黑底圖片_2024-02-17_02-47-58.png"/></fieldset>

<fieldset><legend>img標(biāo)簽在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 {
  /* 設(shè)置元素的寬度和高度 */
  width: 200px;
  height: 150px;
  
  /* 設(shè)置背景圖片 */
  background-image: url('your-image.jpg');
  
  /* 設(shè)置背景圖片大小以適應(yīng)元素 */
  /*background-size: contain; /* 保持高寬比,可能出現(xiàn)空白 */
  /*background-size: cover; /* 保持高寬比, 超出部分看不到 */
  background-size: 100% 100%   /* 不保持高寬比, 如同img默認(rèn) */
  
  /* 其他背景屬性，如需要的話 */
  background-position: center center; /* 背景圖片位置 */
  background-repeat: no-repeat; /* 不重復(fù)背景圖片 */
}

文章來源地址http://www.zghlxwxcb.cn/news/detail-828366.html

以下是一些搜索來的,用于參考

在CSS中，你可以使用background-size屬性來控制背景圖片的大小，使其自動適應(yīng)元素的大小。background-size屬性有幾個可選的值，其中最常用的是cover和contain。

cover：此值將使背景圖像完全覆蓋內(nèi)容區(qū)域，同時保持其寬高比。如果元素的寬高比與圖像的寬高比不匹配，圖像將被剪裁以適應(yīng)元素。
contain：此值將使背景圖像完全適應(yīng)內(nèi)容區(qū)域，可能會留下一些空白空間。圖像將被縮放以最大程度地填充元素，同時保持其原始的寬高比。

以下是一個示例，展示如何使用background-size屬性使背景圖片自動適應(yīng)元素的大?。?/p>

.element {
  /* 設(shè)置元素的寬度和高度 */
  width: 200px;
  height: 150px;
  
  /* 設(shè)置背景圖片 */
  background-image: url('your-image.jpg');
  
  /* 設(shè)置背景圖片大小以適應(yīng)元素 */
  background-size: contain; /*  或者使用 'cover' */
  
  /* 其他背景屬性，如需要的話 */
  background-position: center; /* 背景圖片位置 */
  background-repeat: no-repeat; /* 不重復(fù)背景圖片 */
}

在上面的示例中，.element類定義了一個元素的樣式，該元素具有指定的寬度和高度，并設(shè)置了背景圖片。background-size: cover;確保背景圖片覆蓋整個元素，同時保持其原始的寬高比。如果你希望背景圖片完全包含在元素內(nèi)，而不是覆蓋它，你可以將cover替換為contain。

記得替換url('your-image.jpg')中的your-image.jpg為你實際要使用的圖片路徑。

在CSS中，要使背景圖片自動適應(yīng)元素的大小，你可以使用background-size屬性，并為其設(shè)置適當(dāng)?shù)闹怠Ｗ畛Ｓ玫闹凳?code>cover和contain，它們分別有不同的行為：

cover：背景圖片將被縮放以完全覆蓋元素的內(nèi)容區(qū)域，同時保持圖片的寬高比。這可能會導(dǎo)致圖片的某些部分在元素框內(nèi)不可見，因為圖片會被裁剪以適應(yīng)元素的尺寸。
contain：背景圖片將被縮放以完全適應(yīng)元素的內(nèi)容區(qū)域，同時保持圖片的寬高比。這可能會導(dǎo)致元素的某些部分沒有背景圖片覆蓋，因為圖片會按照其原始比例縮放至最大尺寸，但不會超出元素的邊界。

下面是一個使用background-size屬性使背景圖片自動適應(yīng)元素大小的CSS示例：

.element {
  /* 設(shè)置元素的寬度和高度 */
  width: 300px;
  height: 200px;

  /* 設(shè)置背景圖片 */
  background-image: url('path-to-your-image.jpg');

  /* 設(shè)置背景圖片以覆蓋整個元素 */
  background-size: cover; /* 如果想要圖片完全包含在元素內(nèi)，則使用 'contain' */

  /* 設(shè)置背景圖片的位置（可選） */
  background-position: center center; /* 圖片居中顯示 */

  /* 設(shè)置背景圖片不重復(fù)（可選，但通常與cover或contain一起使用） */
  background-repeat: no-repeat;

  /* 其他樣式（可選） */
  background-color: #f0f0f0; /* 如果圖片加載失敗或未完全覆蓋時顯示的背景色 */
}

在上面的CSS樣式中，.element是你想要應(yīng)用背景圖片的元素的類名。你需要將url('path-to-your-image.jpg')中的路徑替換為你實際的圖片路徑。

background-position屬性用于控制背景圖片在元素內(nèi)的位置，這里設(shè)置為center center意味著圖片將在水平和垂直方向上都居中顯示。

background-repeat屬性設(shè)置為no-repeat確保背景圖片不會平鋪（重復(fù)）以填充元素。這是在使用cover或contain時通常需要的設(shè)置，因為這兩個值的目的就是讓圖片按比例縮放以適應(yīng)元素的大小。

background-color屬性是可選的，它定義了一個背景色，這在圖片加載失敗或圖片未能完全覆蓋元素時很有用。

CSS的background屬性可以用來設(shè)置元素的背景圖片。要使背景圖片自動適應(yīng)元素大小，可以使用background-size屬性。

以下是兩個例子來演示如何使背景圖片自動適應(yīng)元素大小：

使用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屬性被設(shè)置為contain，這將使背景圖片在保持其原始比例的同時，盡可能地適應(yīng)元素的大小。背景圖片將被縮放以適應(yīng)元素的寬度或高度，但不會超出元素的邊界。

使用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屬性被設(shè)置為cover，這將使背景圖片完全覆蓋元素，并保持其原始比例。背景圖片將被縮放以適應(yīng)元素的寬度或高度，以便完全覆蓋元素的邊界。這可能會導(dǎo)致圖片的某些部分被裁剪掉。

在CSS中，要讓背景圖片自動適應(yīng)元素大小，你可以使用background-size屬性。background-size屬性允許你控制背景圖片的大小。有幾種可能的值：

auto：這是默認(rèn)值，背景圖片將保持其原始尺寸。
cover：背景圖片將被拉伸以覆蓋整個元素，同時保持其縱橫比?？赡軙胁糠謭D片在元素區(qū)域之外不可見。
contain：背景圖片將被縮放以完全適應(yīng)元素的內(nèi)容區(qū)域，可能留下一些空白空間。
<length>和<percentage>：你可以指定一個具體的長度值（如px、em等）或一個百分比，來定義背景圖片的大小。

要使背景圖片自動適應(yīng)元素大小，通常推薦使用cover或contain值。以下是一個例子，展示如何使用cover值：

.element {
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: center; /* 可選，使圖片居中顯示 */
  background-repeat: no-repeat; /* 可選，防止圖片重復(fù) */
}

在這個例子中，.element是一個CSS類，你可以將其應(yīng)用到你想要添加背景圖片的HTML元素上。background-image屬性設(shè)置了背景圖片的路徑，background-size: cover;使背景圖片覆蓋整個元素，并保持其縱橫比。background-position: center;和background-repeat: no-repeat;是可選的屬性，用于進一步控制背景圖片的顯示。

到了這里，關(guān)于CSS的background 背景圖片自動適應(yīng)元素大小,實現(xiàn)img的默認(rèn)效果 background-size:100% 100%；的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！