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

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 `` with class of "locations"

HTML

  
     
      
      New York  
    
  
  
     
      
      San Francisco  
    
  
  
      
      
      Paris  
    
  
  
     
      
      London  
    
            

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)

  
    
      
        
        {{city}}  
      
    
  

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.

The use of ul seems appropriate. My concern with using `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 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

StackExchange Code Review Q#40756, answer score: 7