2015-07-13 46 views
0

爲什麼卡片組件的圖像被用作背景而不是圖像來填充卡片的媒體部分?不能我們只是使用圖片標籤呢?卡片中的圖像

我試圖使用MDL框架做出tumblr模板 但有麻煩實施卡組件,用於圖像的帖子,因爲tumblr使用圖像標記

請解釋爲什麼MDL使用圖片作爲背景和卡組件

+0

背景提供的例子只是使用背景圖片。您可以隨意插入標準img標籤以及任何其他媒體標籤。對於通過CSS添加的媒體沒有硬性規定。這是在例子中完成的,因爲媒體不是卡的主要部分,而是風格的增強。 – Garbee

回答

3

都沒有真正阻止你使用img標籤。以this爲例。

但使用圖像作爲div的背景有一定的優勢:

    (例如,通過使用
  1. 圖像不允許你下載的圖片
  2. 您在響應性方面更大的靈活性上點擊鼠標右鍵background-size: cover填寫div)。 更新:儘管您可以在寬度/高度上設置100%以適應圖像,但cover可保持寬高比,並且通常會提供更好的結果。
  3. 因爲你的形象就是你不需要它的位置設置爲absolutediv內的其他元素被定位在圖像(因爲它是在所有的MDL例子的情況下)
+0

是的,但tumblr不會這樣工作,我將不得不以某種方式爲每個圖像後使用動態卡類,這似乎很複雜 – LCallaghan84

+0

你是否正在創建一個新的tumblr主題?我似乎不明白這個問題。你看到我發送的代碼示例了嗎? –

+0

媒體元素中的媒體寬度/高度可以達到100%,從而使媒體元素的響應速度最快。因此,沒有CSS圖像解決方案,第2點是完全可以實現的。我們不會默認這樣做,因爲它可能會改變人們放在那裏的圖像的比例,這是不好的。 – Garbee