Calibration of images with an empty source

Question

I have a long page built using Angular. The images on the page are lazy loaded, so src not set until the image scrolls.

The container is flexible, and images should never scale more than their sizes (which I know and can set the style attribute)

Now I have problems getting images without properly scaling the source.

TL DR I want <img src='pic.jpg'/> and <img src=''/> occupy the same amount of space inside a flexible container with maximum dimensions.

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

---

HTML (this will be created from JavaScript, where we know the sizes before)

 <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, the demonstration of image sizes is hardcoded, so they are no longer flexible. I want to avoid this: http://codepen.io/chrismbarr/pen/JdEYMe

Answer 1

In the case when you know the size of each image ahead of time, I almost always recommend combining the simple ol <div> and background-image property. You don’t have to give in to the features of the <img> , and you still get support for animated .gifs .

I hacked this quick codepen to make you feel. I use the directive to set the width and height that are passed to the selection area, and then set the background-image property when I find that the directive's top offset is less than the window height. A quick, dirty, but simple implementation of what I think you're going to.

Benefits:

• The aforementioned deferment from accessing the ubiquitous img tag.
• The ability to add some neat freezing effects (trying to hang over one of the cats in codeden).

Disadvantages:

• Finding an image loading a background image is not as simple as using the img.onload available for image tags. You can probably create a directive template that img used to issue this function. To you.

Hope this helps!

EDIT . As Chris noted in a comment, this method still does not address the aspect ratio problem when the image containers have different widths. To solve this problem, I get one of my favorite CSS tricks supporting the padding-bottom aspect ratio that Nicholas Gallagher wrote about.

Although, unfortunately, I don’t have time to add a fix to my original pen (to work), I created this to show the implementation using the same images . The padding-bottom element of the element will be scaled proportionally as the element widths increase or decrease, thereby preserving the aspect ratio of the element.

Answer 2

that just what you do

  <img src="img.jpg" width"20px" height"20px"/> 

or any number of pixels and do the same with another.

  <img src="" width"20px" height"20px"/>