Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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

live demo

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.

share|improve this question
add comment

2 Answers 2

up vote 7 down vote accepted

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

share|improve this answer
    
right, well the idea was that images that are selected would be cropped down to a certain dimension to ensure that they look good at various scales. –  JGallardo Feb 3 at 17:26
1  
I think that cover will serve you better and be much simpler to implement :) –  Jivings Feb 3 at 17:29
2  
background-size: cover is specially helpful when you want to scale the image, but don't know what will be the dominant dimension. That is, if you need to scale to fit the width, or the height. –  vals Feb 3 at 18:57
add comment

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;
}
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.