當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

div自适应背景图的尺寸：设置背景图的方式；img作为div元素的方式

發布時間：2024/5/8 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 div自适应背景图的尺寸：设置背景图的方式；img作为div元素的方式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

零.問題描述和基本情況介紹

案例：

問題及疑問：

一.background-size:cover;和background-size:100%;的區別：

1.background-size:100%；

（1）div的高度足夠的時候：

（2）div的高度不足夠的時候：

（3）background-size:50%是什么效果：填充所在div的50%寬的區域

2.background-size:cover;

（1）當div的寬高比大于圖片的寬高比時：

（2）當div的寬高比小于圖片的寬高比時：

（3）當div的寬高比等于圖片的寬高比時：

3.二者區別

二：通過設置背景圖：?background-image:url("");實現；這個主要是：background-size:cover;和background-size:100%;（這個很無奈，其實無法自適應）

三：另一種新的策略：把圖片作為div的元素（而不是作為background-image）

三.1：使用標簽，讓圖片作為div中的元素，對于兩個邊框圖片來說

step1：使用標簽，使得圖片作為div中的元素：

三.2：使用標簽，讓圖片作為div中的元素，對于中間那個需要充滿整個屏幕的div

step1:使用標簽，把圖片作為div中的元素，而不是作為背景圖

step2：使這個div充滿整個屏幕（其實是div的父級的啦）

step3：div中的圖片元素，根據div的寬度，百分比的顯示（圖片不會長寬比例不會變形）（第二種方式的核心內容）

三3：附錄：第二種策略的示例代碼：

零.問題描述和基本情況介紹

案例：

案例1：div手動設置大小，并不能自適應背景圖的尺寸

CSS：

.div0{background-image:url("http://climg.mukewang.com/59c9f7ce0001839219034033.png");background-repeat:no-repeat;background-attachment:scroll;background-size:100%; /*圖片完全充滿div*/width:100%;height:10000px; /*疑問？：div的尺寸如何自適應背景圖的尺寸*/}.div1{background-image:url("http://climg.mukewang.com/5a3383c70001f1b702240364.png");background-repeat:no-repeat; width:100px; /*疑問？：div的尺寸如何自適應背景圖的尺寸*/height:200px;background-size:100%; /*圖片完全充滿div*/position:fixed;top:300px;left:5px; }.div2{background-image:url("http://climg.mukewang.com/5a3383d00001a3dd02240364.png");background-repeat:no-repeat;width:100px; /*疑問？：div的尺寸如何自適應背景圖的尺寸*/height:200px;background-size:100%; /*圖片完全充滿div*/position:fixed;top:300px;right:5px; }

問題及疑問：

上面案例中，div的尺寸都是手動設置的，并沒有參考實際圖片的尺寸，即我們不需要設置div的寬度和高度，實現div自適應圖片的尺寸？

為了解答這個疑問，需要先了解background-size:cover;和background-size:100%;的區別；然后本博客會介紹一下兩種方法來解決這個問題；

（PS：目前的解決方案，僅限于HTML和CSS，并沒有JavaScript）

一.background-size:cover;和background-size:100%;的區別：

background-size:x%：

? ? ? ? ● x表示圖片占據所在div的寬度的百分比；

? ? ? ? ● 圖片的長寬比例不會變化，即使由于div太短而導致圖片顯示不全，圖片的長寬比例也不會變化；

? ? ? ? ● 圖片”寬度“上完全顯示的，長度上能夠顯示全需要看div的長度夠不夠；

具體可以看下面的例子：

1.background-size:100%；

示例程序：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例程序</title><link rel="stylesheet" type="text/css" href="index.css"> </head> <body><div class="div0"></div> </body> </html>

（1）div的高度足夠的時候：

示例1：

效果：

……………………………………………………

示例二：

效果：

示例三：

效果：

發現，當高度夠的時候，background-size:100%就是完全適應div，等比的縮放完全填充所在的父div；

（2）div的高度不足夠的時候：

示例1：

效果：

示例2：

效果：發現，background-size:100%圖片長寬比例不變的情況下，完全填充div的寬度！！！！！！！！！！！！；自然能發生下圖這種部分不顯示的情況。

（3）background-size:50%是什么效果：填充所在div的50%寬的區域

效果：又一次印證background-size:50%：是根據寬度自適應的；

再如：

2.background-size:cover;

把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法背景定位區域中。

為了便于演示，把圖片截取成了300*200的圖片，即此時圖片的寬高比是 3:2。

（1）當div的寬高比大于圖片的寬高比時：

示例1：

效果：寬度完全顯示，高度有缺失

示例2：

效果：寬度完全顯示，高度有缺失（而且比寬高比是2：1時缺的比例更高）

（2）當div的寬高比小于圖片的寬高比時：

示例1：

效果：高度完全顯示，寬度有缺失

示例2：高度完全顯示，寬度有缺失（而且比寬高比是1：1的時候確實的比例更大）

效果：

（3）當div的寬高比等于圖片的寬高比時：

示例1：

效果：

示例2：

效果：

3.二者區別

? ? ?通過上面的示例發現，

? ? ? ? ? ? ?background-size:100%;在任何時候都會優先適應寬度；

? ? ? ? ? ? ?background-size:cover;是跨度和高度誰牛逼就適應誰；

二：通過設置背景圖：?background-image:url("");實現；這個主要是：background-size:cover;和background-size:100%;（這個很無奈，其實無法自適應）

通過background-size:cover;和background-size:100%;的性質可以發現，其并不能很好的完成背景圖片的自適應；所以為了實現完美的顯示的效果，目前只能把對應的長度設置的長一點，以使其能完全顯示。

注意下面的四條注釋：在不知道圖片尺寸的情況下，只能盡量摸索著設置width和height，盡量讓其的值合理些。。。。

.div0{background-image:url("http://climg.mukewang.com/59c9f7ce0001839219034033.png");background-repeat:no-repeat;background-attachment:scroll;width:100%; /*對于占滿整個屏幕的div0來說，通過width:100%;設置其寬度*/background-size:100%; height:3000px; /*對于占滿整個屏幕的div0來說，只能把height設置的大一點，以防止顯示不全*/} .div1{background-image:url("http://climg.mukewang.com/5a3383c70001f1b702240364.png");background-repeat:no-repeat; width:100px; /*對于左側邊欄的div1來說，只能試著把width和height設置的合理一點*/height:200px;background-size:100%;position:fixed;top:300px;left:5px; } .div2{background-image:url("http://climg.mukewang.com/5a3383d00001a3dd02240364.png");background-repeat:no-repeat;width:100px; /*對于右側邊欄的div2來說，只能試著把width和height設置的合理一點*/height:200px;background-size:100%;position:fixed;top:300px;right:5px; }

三：另一種新的策略：把圖片作為div的元素（而不是作為background-image）

三.1：使用<img>標簽，讓圖片作為div中的元素，對于兩個邊框圖片來說

不使用div的背景圖設置，即不使用background-image:url("http://climg.mukewang.com/59c9f7ce0001839219034033.png");這種給div設置背景圖的方式實現上述效果：

而是：

step1：使用<img>標簽，使得圖片作為div中的元素：

此時，如果定義的div正好（純屬巧合）和div設置的尺寸吻合，那么就很完美：圖片既沒有溢出，div空間也沒有多余：

如果div的尺寸設大了：

如果div的尺寸設小了：發生溢出

但無論如何，上面三個div尺寸設置大、小、正好的情況下，都可以實現那個效果；

三.2：使用<img>標簽，讓圖片作為div中的元素，對于中間那個需要充滿整個屏幕的div

step1:使用<img>標簽，把圖片作為div中的元素，而不是作為背景圖

step2：使這個div充滿整個屏幕（其實是div的父級的<body>啦）

step3：div中的圖片元素，根據div的寬度，百分比的顯示（圖片不會長寬比例不會變形）（第二種方式的核心內容）

即圖片的width:60%的這個60%參考的是所在div的寬度

示例1：

示例2：

示例3：

示例4：這個例子更能體現，img的width是針對其所在父div來說的，

三3：附錄：第二種策略的示例代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例程序</title><link rel="stylesheet" type="text/css" href="index.css"> </head> <body><div class="div1"><img class="img1" src="http://climg.mukewang.com/59c9f7ce0001839219034033.png"></div><div class="div2"><img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png"></div><div class="div3"><img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png"></div> </body> </html> .div1{width: 100%; } .img1{width: 100%; } .div2{background-color: red;width: 224px;height: 364px;position: fixed;top: 20%;left: 1%; } .div3{width: 224px;height: 364px;position: fixed;top: 20%;right: 1%; }

總結

以上是生活随笔為你收集整理的div自适应背景图的尺寸：设置背景图的方式；img作为div元素的方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。