How to make a responsive image in a block?

Question

css

What is the best way to make responsive images?
Recently I got acquainted with this method: after loading the page, make images the background, and delete img. Everything seems to be cool, but how will this affect indexing .. And in general, does anyone do this?
https://codepen.io/anon/pen/NaBEgb

Answer 1

1. There is a tag <picture>to show different images on different screens
2. height: auto for proportions
3. positioning
4. object-fit for proper cropping, similar to bg size.
About the fact that pictures can be prepared in advance of the correct proportions, it is better to keep silent.
In the presence of all this, it is not clear why the manipulation of turning pictures into a background is needed. Unless someone knows js better than css.

Answer 2

try <picture> tag under screen dimensions...

Answer 3

Try setting the picture sizes to "vh" and "vw".

Answer 4

If you know the dimensions of the image, you can do this:
1. give the block position: relative and choose (does not matter) padding-top or padding-bottom as a percentage (image height / image width * 100)
2. absolutely position another block inside ( all coordinates by zeros)
3. put a picture inside the absolute block width: 100%