Sizing images with a blank source - html

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.

Answer 2

that's kinda simple what you do is
<img src="img.jpg" width"20px" height"20px"/>
or any number of pixels and do the same with he other one
<img src="" width"20px" height"20px"/>