How to make an image preloader that preserves the aspect ratio of the original file?

Question

There is a stub picture that plays the role of a preloader of the loaded picture. The size of the downloaded images are known and displayed in the tag. I also did the img max-width:100% tag so that the picture does not go beyond the edges of the page on small screens.

With the original picture, everything works well (I wrote height:auto to keep the proportions) But when we put the 1x1 stub, the proportions of the pictures are taken respectively 1 to 1, and not the ones shown in the tag. If you remove the height:auto situation is still not solved, because size remains 200, and should be smaller.

 img{ max-width:100%; height:auto; }

 <img src="https://dummyimage.com/1x1/03ded7/" width="1500" height="200">

Is there a way to do here the scaling while maintaining the necessary proportions, without resorting to JS?

All pictures are of different sizes, there is an opportunity to do something with the substitution of plugs. Some pictures are smaller than the screen, some are larger. There is nothing besides the pictures, around the <p> with the text

Long thought, maybe somehow you can, but nothing comes to my mind.
@IvanKaraman, wrote in the question, except for the img tag there is nothing substantial.
img lies in p , p with pictures and texts form a long article.

Crantisz Crantisz 8.599 2 eight 38 · Accepted Answer · 2016-12-15T07:18:16

Solved the problem in this way.

You can create SVG images of the same size on the fly.

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 200" width="1500" height="200"/>

The resulting code is encoded and inserted into the src attribute of the image.

 <img width="1500" height="200" src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201500%20200%22%20%20%20width=%221500%22%20height=%22200%22/%3E">

JS implementation example:

 $('img').each(function() { //получаем размер изображения iw = $(this).attr('width') ih = $(this).attr('height') //Проверяем, есть ли размеры if (iw !== undefined && ih !== undefined) { //Создаем SVG с размерами изображения: svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + iw + ' ' + ih + '" width="' + iw + '" height="' + ih + '"/>'; //Вставляем картинку прямо в тег: $(this).attr("src", "data:image/svg+xml," + encodeURI(svg)); } })

 img { max-width: 100%; height: auto; background: #03ded7; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img width="1500" height="200">

G.Denis G.Denis 573 2 eleven · Answer 2 · 2016-12-14T11:41:08

And what if through background-image , and background-size:cover

G.Denis

573 2 eleven

The question is how to set the size of the html element, and not how to place the image in the already specified sizes. So you can even use background-color . - Crantisz

|

Answer 3 · 2016-12-15T01:50:30

If you do not change the code, but only replace the image, then through CSS there is no way to do it. Pictures will still use the proportional proportions. But if you have pictures of more or less standard size, you can try to use not a single-pixel picture, but a picture with the same proportions.

For example, a PNG image with proportional dimensions of 15x2 pixels you need is only 95 bytes in size . Such a picture would be better connected according to the data: scheme, otherwise you will spend more on HTTP headers. (A full-size picture takes only a little more - 144 bytes .)

If the HTML code can still be changed, then there are many options.

The problem is that the pictures may be larger than the width of the screen, and may be less.
In the question you have written that you need to solve the problem without resorting to JS .
JS here for an example, the replacement of images can be done by the serverside.

How to make an image preloader that preserves the aspect ratio of the original file?

3 answers 3

More articles: