How can I make the red circles stay in the same places when changing the screen width?

Question

css

Good afternoon. There is a block with a picture and red dots.
I need the dots to stay in the same places as the screen width changes.

The height of the block at 768px should be 500px, and on the computer 854px. Now on the desktop, the circles don't seem to shift, but on the adaptive it's really bad.

Can you tell me how to make these blocks? The location of the points is set in html through style as a percentage. Thanks for the answer.

https://jsfiddle.net/IvanGrishov/97gsq4px/

Answer 1

I won’t tell you the exact solution, but as I understand it, your problem is due to the fact that your picture is cut off thanks to object-fit (and it would also be cut off through background), and the coordinates of the points as a percentage are calculated not from the picture, but from the element. For example, top: 20% will become 30% relative to the top of the image if 10% of its height is left outside the edge.
It seems to me that you need to put the points in a container, fix it either with a width of 100% (smartphones) or a fixed height (desktop), and the second parameter is read either through the aspect property, or through JS to support any browsers. At the same time, place the dots in this container, and make the image a background with background: contain for the desktop, when the container is wider than the image, and for mobile, just explicitly set the width of the background in pixels to be greater than the width of the screen, and the height to auto to maintain proportions so that the edges of the image cut off horizontally. Or make a scroll container for smartphones, which is more practical for the user.
Or if it is not critical for you that a part of the scheme is cut off (although it should be critical), you can leave cover as it is now (or background-size: cover), place an invisible 1px block in the center of the container, put points in it and set them negative coordinates, tying everything to the center as in school on the graphs. And put overflow: hidden on the container so that the dots are also hidden when they fly out of the edges.

Answer 2

For starters, you can shorten the code, the div with the class "dots-item" can be left alone, the other two dots can be drawn using pseudo elements, the code will be more compact. And about the adaptive points, here I can make an assumption, you need to use positioning, set the picture to postition: relative, and for the div position: absolute. The points will no longer go beyond the borders of the picture, and set the positioning of the points as a percentage, say left: 20%, top: 15%; the values ​​​​will depend on the picture, if somewhere it moves out a lot, I use media, and manually tweak a little. Perhaps there is a more elegant solution to the problem, but my modest skills are only enough for such a solution; D

Answer 3

Set point coordinates in percentage