標籤:

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

如題


『如何實現 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這麼簡單的問題。

好了熱門蹭完了我撤了


推薦閱讀:

像素和CSS媒體查詢?
零基礎的人如何在一個月內做出令人驚訝的網站?
CSS究竟是怎麼工作的?
Razor 生成的html格式可以調整嗎?

TAG:HTMLCSS |