Sizing images with a blank source

Question

I've got a long page, built with Angular. The images on the page are lazy-loaded so that the src is not set until the image is scrolled into view.

The container is flexible and the images should never scale larger than their dimensions (which I know and can set on a style attribute)

Right now I've having issues getting the images without a set source to scale properly.

TL;DR I want <img src='pic.jpg'/> and <img src=''/>to take up the exact same amount of space inside a flexible container with maximum sizes.

DEMO: http://codepen.io/chrismbarr/pen/xGgGRq?editors=110

---

HTML (this will be generated from JavaScript where we know the dimentions ahead of time)

<div class="container" style='max-width: 500px; max-height: 700px;'>
  Image with a source
  <img src="http://lorempixel.com/500/700/cats/2/" />
</div>

<div class="container" style='max-width: 500px; max-height: 700px;'>
  Image with no source
  <img src="" />
</div>

CSS

img{
  display:block;
  max-width: 100%;
}  

img[src=''],
img:not([src]){
  //no image source
  height: 100%;
  width: 100%;
}

Here's a demo of the image sizes being hard-set so they are no longer flexible. This is what I want to avoid: http://codepen.io/chrismbarr/pen/JdEYMe

Answer 1

In the case that you know the dimensions of every image ahead of time, I almost always recommend the combination of a plain ol' <div> and the background-image property. You don't have to pander to the idiosyncrasies of the <img> tag, and you still get support for animated .gifs.

I whipped up this quick Codepen to give you a feel. I use a directive to set the width and height, which are passed into an isolate scope, then set the background-image property when I detect the directive top offset is less than the height of the window. Quick, dirty, but simple implementation of what I think you're going for.

Advantages:

• Aforementioned reprieve from dealing with the ever cantankerous img tag.
• Ability to add some neat hover effects (trying hovering over one of the cats in the Codepen).

Drawbacks:

• Detecting image load with a background image isn't quite as easy as using the img.onload callback available for image tags. You could likely create directive template that used a img to squeeze out this functionality. Up to you.

Hope this helps!

EDIT: As Chris mentioned in a comment, this technique still doesn't address the aspect ratio issue when the image containers are of varying widths. To solve this I get to whip out one of my favorite CSS tricks, maintaining aspect ratio with padding-bottom, written about by Nicolas Gallagher.

While unfortunately I don't have time to add the fix into my original pen (headed to work), I did create this to show an implementation using the same images. The padding-bottom of an element will proportionally scale as the width of an element increases or decreases, thus maintaining the element's aspect ratio.