Was this use of <img> tags in this HTML over background images better?

Question

I saw this UI for a mobile app, but I reverse engineered it for the web. This is how it looks in my CodePen

This would be either a favorites or featured list locations to travel to. I decided to go with a <ul> with class of "locations"

HTML

<ul class="locations">
  <li>
    <a href="#"> <!-- url would be generated-->
      <img src="http://shared-assets.s3.amazonaws.com/codepen/img/new-york-320x140.jpg">
      <span>New York</span>  
    </a>
  </li>
  <li>
    <a href="#"> <!-- url would be generated-->
      <img src="http://shared-assets.s3.amazonaws.com/codepen/img/san-francisco-320x140.jpg">
      <span>San Francisco</span>  
    </a>
  </li>
  <li>
    <a href="#"> <!-- url would be generated--> 
      <img src="http://shared-assets.s3.amazonaws.com/codepen/img/paris-320x140.jpg">
      <span>Paris</span>  
    </a>
  </li>
  <li>
    <a href="#"> <!-- url would be generated-->
      <img src="http://shared-assets.s3.amazonaws.com/codepen/img/london-320x140.jpg">
      <span>London</span>  
    </a>
  </li>          
</ul>

In Production, I will be building this with Meteor which uses MustacheJS templates. So this is likely how I will structure the list.

MustacheJS template (proposed)

<template name="featuredLocations">
  <ul class="locations">
    <li>
      <a href="{{{locationLink}}}">
        <img src="{{{locationImage}}}">
        <span>{{city}}</span>  
      </a>
    </li>
  </ul>
</template>

CSS

.locations { 
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
.locations > li {
  border-bottom: 1px #dd4977 solid;
  height: 136px;
  width: 100%;
  position: relative;
  overflow:hidden;
}
.locations li a {
  background-color: #777;
  display: block;
  height: 100%;
  postion: relative;
  text-decoration: none;
  z-index: 1;
}

.locations > li > img {
  width: 100%;
  height: 135px;
  position: absolute; top:0; left: 0; right: 0;
  z-index: 10;
}

.locations > li > a > span {
  background-color: #dd4977;
  color: #fff;
  font-size: 21px;
  letter-spacing: 1px;
  padding: 3px 5px 0 5px;
  position: absolute; bottom: 0; left: 6px;
  z-index: 20;
}

---

The actual images in production will be bigger and will scale down according to the device. There will be media queries that are not shown here.

Answer 1

The use of ul seems appropriate. My concern with using <img>s would be with the image dimensions. From what I can see above, unless you create your images specifically in those dimensions, it will become a pain to ensure they scale correctly.

I've found that if you want to preserve a predetermined width and height for your images without ruining the aspect ratio it's almost always easier to use background-image rather than <img> tags.

Using background-size: cover you can ensure that the image covers the available space, without losing the ratio:

The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container

Answer 2

With my customers, I often run into the trouble that background images are not printed by default on most browsers (but it can be enabled in the print options).

This is an other option to let the images scale to the available space:

img{
 max-width:100% !important;
 height: auto;
 display: block;
}