0

Why are the images for the cards component being used as a background instead of the image to fill up the media portion of the card? cant we just use the image tag instead?

I am trying to use the MDL framework to make a tumblr template but having trouble implementing the card component for the images posts since tumblr uses image tags

please explain why MDL is using images as backgrounds for the card component

LCallaghan84
  • 45
  • 1
  • 6
  • The examples provided simply use background image. You are free to insert a standard img tag all you want, along with any other media tag. There is no hard-rule as to the media being added via CSS. This is done in the examples since the media is not a primary piece of the cards, but a stylistic enhancement. – Garbee Jul 13 '15 at 15:28

1 Answers1

3

Nothing is really holding you back from using the img tag. See this as an example.

However using images as background of divs has some advantages:

  1. Right clicking on the image does not allow you to download the image
  2. You have more flexibility in terms of responsiveness (e.g. by using background-size: cover to fill the div). UPDATE: even though you can set 100% on width/height to adapt the image, cover keeps the aspect ratio and in general provides better results.
  3. Since your image is just a background you don't need to set its position to absolute to let other elements inside the div be positioned over the image (as it is the case in all of MDL examples)
Yan Foto
  • 10,850
  • 6
  • 57
  • 88
  • yeah but tumblr does not work that way, I would have to somehow make a dynamic card class for each image post be used, that seems complicated – LCallaghan84 Jul 13 '15 at 14:50
  • Are you creating a new tumblr theme? I don't seem to understand the problem. Did you see the code example I sent? – Yan Foto Jul 13 '15 at 14:57
  • You can width/height 100% the media within the media element to get them to be mostly responsive. So point 2 is entirely achievable without a CSS image solution. We don't do this by default, since it could change the ratio of images people put in there and that isn't nice. – Garbee Jul 13 '15 at 15:30