如何實現 div的大小由背景圖片的大小決定？

02-06

如題

『如何實現 div 的大小由背景圖片的大小決定？』

如果這是面試題/練習題，那麼這是一道糟糕的題目。如果是實踐中提出的，那麼可以說是需求的理解或表達有誤（比如謝然提到的可能只是想阻止圖片保存或拖放）。

如果一定要問我，我只能回答，不好實現。

當然，『辦法』總是有的，比如一些答案說的裡面放個img，或者直接用js操作一下樣式之類的。但是這些方法其實都是為了解題而解題。比如都用了 img 了，那還算什麼『背景圖片』？

所謂『背景圖片』，也就是該圖片不屬於『內容』，是可有可無的。既然是可有可無的東西，為什麼會決定內容本身或內容容器（div）的大小？

也就是說這個題面本身就包含了自相矛盾的因素。

在實踐中，涉及容器和充滿整個容器的圖片的情況大體有兩種。

一種是，圖片是真正的背景圖片。這種情況下是由容器或容器中的內容來決定背景圖片的大小和設置（比如平鋪、縮放等）。有些情況下容器是固定大小，那麼背景圖片也可以是固定大小，但我們不應顛倒理解為是背景圖片決定容器大小。

另一種是，圖片是內容。這種情況直接用 img 元素即可。少數時候，圖片以外還有其他內容，比如我們希望圖片和圖片的說明文字疊放，這可能被誤認為是文字+背景圖片。

以上。

主要是你這種需求本來就是倒置的

背景圖片的大小本來就是由元素的大小以及background-size共同決定的

而你現在想反過來讓元素的大小由背景圖片決定

能做的也就是把圖片放在div里讓它把div撐大了，而你的需求本來也就應該用這種方式來實現

但是換個思路，如果，如果你的圖片比例是固定的，那麼用padding-bottom為百分比的方式也能讓元素大小做到跟背景圖片成相同比例

再不行，你可以試試object-fit屬性啥的

再不行，還可以用svg圖片做為background-image，這用法可就多了……

所以不如你把你具體的use case說出來，你到底想在什麼樣的頁面實現什麼樣的效果，而不是AB Problem式的問一個你以為能解決你問題的問題出來

比如說如果你想讓圖片做為背景為的只是讓圖片不可被右鍵另存為，那麼一個pointer-events:none就可以解決，完全沒必要把它當成背景圖片。

再比如說你只是想讓圖片不能被拖動，那麼一個-webkit-user-select: none應該也可以搞定

前面有很多吐槽的我就不廢話了，非要如題目那樣實現的話可以這樣，但是何必呢。

& .a{ display:inline-block; background-image:url("../images/xx.jpeg"); ... } .a.b{ position:relative; z-index:-1; // 或 ↓ opacity:0; ... } &

& & &

後端返回圖片尺寸用js改div大小。

一般不會那麼干，也許你的實現思路有問題

寬度100%高為0 padding 為100%

可以實現，我直接貼代碼吧。

以上是測試代碼

以上元素查看效果。

這種方法可以實現在不設置背景圖容器高度的情況下，背景圖撐滿容器的效果。

但是還是需要設置width的，就像你用img撐最好也設置width一樣。

css上設置positionsize，js獲取到對應的具體數值，再給div設置上，就OK了。

非要這樣做，三種辦法試一下

純css 寫死div為圖片的長和高背景大小用contain（圖片極少，寫死的代碼）。

js 動態寫css控制div和背景大小（隨意）

後台迭代生成有圖片寬高的div和背景圖片（隨意）

參考一下

http://blog.phpdr.net/js-get-image-size.html

本末倒置了吧，背景圖片是依託於盒子存在的，當然，這種需求是可以實現的。

簡單設想一下場景：

有一張寬高不確定的圖片，需要在某個盒子里100%展示。

問題來了，為什麼盒子的寬高不確定，這對於布局而言是非常大的挑戰，即使是絕對定位等脫離文檔流的形式，在展示上的效果也是十分不好的。

所以。。簡單點，用img標籤的方式簡單點。。。

反正有謝然大佬兜著，我手機亂答一發吧。說不定有人贊我呢

可以考慮把html結構改成div&>img

然後css設置div屬性為內容撐起寬高

如果允許用js的話就省事好多，就是得注意ie兼容性了。

如果允許用jQuery的話兼容性也不用考慮了，相信題主也不至於問jQuery這麼簡單的問題。

好了熱門蹭完了我撤了