I’m wanting to do this quite a lot at the moment:

  • a row of logos
  • all of equal maximum width and height
  • centered both vertically and horizontally
  • stretched to fit by the biggest dimension

Like this:

Viewpoint Community Media member logos

Or this:

Cocktails in Care Homes logos block

A couple of times I’ve done this in conjunction with Owl Carousel.

This is a piece of HTML/CSS that I’m going to want again, so it’s worth documenting.

It needs three elements. One to fix the size of the outer item container and give it margin/padding; one to fill the container up to the padding, to contain the actual image; and one to be the image itself.

It looks a bit like this (forgive my div-itis – use whatever structure is appropriate for you with anchors and lists if needs be):

<div class="item-outer">
  <a href="http://somesite.com" class="item-inner">
    <img src="http://mysite.com/images/1.png">
  </div>
</div>

The CSS uses the horizontal/vertical centering trick enabled by 2D tranforms – it doesn’t support IE9 or Opera Mini. Yes, you could probably use FlexBox; I’m a bit slow.

.item-outer {
  display: block;
  float: left;
  height: 24px; /* Make this what you want */
  width: 20%; /* For 5 logos */
  /* Adjust margin and padding to taste */
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 0;
  margin-right: 0;
}
.item-inner {
  display: block;
  height: 100%;
  width: 100%;
  position: relative; /* Needed for absolute positioning of images inside */
}
.item-inner img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

Hopefully you can adjust that to suit your needs.

Useful? Better ways? Leave a comment!