Gudradain / spirit-island-template

A set of templates to help create fan made content for the board game Spirit Island.
MIT License
16 stars 22 forks source link

div tag instead of img tag #19

Closed LokiMidgard closed 3 years ago

LokiMidgard commented 3 years ago

Any opinion on using div tags with background-image instead of img tags?

I replaced the Artworks of the Spirit and the cards all with div's in my project. This prevents distortion and allows a finer control of the position.

That way I can only use one Picture of the spirit for the front board, the lore side and the back of the unique cards, without cropping the image to the correct format. I also don't really need to know the aspect ration, since the pictures will not be distorted.

Since the project heavily relies on js, the user would not need to know how to set styles.

Instead of

  <board>
    <img class="spirit-image" src="example1.png" />
    <img class="spirit-border" src="example2.png" />
    <spirit-name>
      River Surges in Sunlight
    </spirit-name>
    <!-- ... -->

The user writes

  <board spirit-image="example1.png" spirit-border="example2.png" >
    <spirit-name>
      River Surges in Sunlight
    </spirit-name>
    <!-- ... -->

In addition there could be optional parameter that control position and scale

<board spirit-image="example1.png" 
       spirit-image-x="50" 
       spirit-image-y="100"
       spirit-image-scale="130"
       spirit-border="example2.png" >
  <spirit-name>
    River Surges in Sunlight
  </spirit-name>
  <!-- ... -->
LordMotas commented 3 years ago

I think something like this would simplify things a bit and would be a welcome change.