How to catch the image size and position it on the object?

Good time of day.
Who can tell that kind of thing. On the page there is an image, which increases depending on screen size. And there are objects5cc94f3d5a4f7491081350.png
The question is. how to opozicionerov these objects, so they do not fly when the image is enlarged?
Here this is realized(on the last screen before the footer) https://straticainternational.com/products/broadwa... but I can not get how, because there is a rendering via js as I understand it.
Who can tell how to do?
March 20th 20 at 11:20
2 answers
March 20th 20 at 11:22
Solution
In percent relative to the total of the wrapper. Without js.
@Moses, I understand

.pi {
position: absolute;
left: 17.4%;
top: 13.7%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 139px;
height: 141px;
}

width: 139px;
height: 141px;

need width: 100%; and height: auto;

and then what
.ia{
position: absolute;
-webkit-animation: pulsate .5s infinite alternate;
animation: pulsate .5s infinite alternate;
} - Dion commented on March 20th 20 at 12:22
@domingo_Kr, is not it does not work. - Dion commented on March 20th 20 at 12:25
Okay, thank you. Try - Iliana_Hauck commented on March 20th 20 at 11:25
@Lillie72,

Here's an example of one point
https://jsfiddle.net/xuh1wac8/
the size is a little less specifically for clarity, do the math needed - Margot_Ortiz commented on March 20th 20 at 11:28
@Lillie72, - Brian.Jones59 commented on March 20th 20 at 11:31
@Moses, thank you so much!!!
I think this is the solution..
Just on that example, that overthrown, the circles , if you open the console, you can see that they are an inline styles via js and is shifted to much down, did not understand then why - Iliana_Hauck commented on March 20th 20 at 11:34
@Daren, thanks! - Iliana_Hauck commented on March 20th 20 at 11:37
@Moses, but there is a difference?
I already wrote above, but duplicate - Just on that example, that overthrown, the circles , if you open the console, you can see that they are an inline styles via js and is shifted to much down, did not understand then why - Iliana_Hauck commented on March 20th 20 at 11:40
@Moses, Yes, thank you) corrected. - Brian.Jones59 commented on March 20th 20 at 11:43
@Lillie72, there are pop-up labels (tooltips) are positioned via js, so they did not come out beyond the screen.
spoiler
5cc95d4fb8b56860150696.png5cc95d5865542157228536.png
- Brian.Jones59 commented on March 20th 20 at 11:46
@Lillie72, js for tooltips. The mugs themselves don't see the point to position js. - Margot_Ortiz commented on March 20th 20 at 11:49
@Moses, @Daren, But I need to be there, too, tips to do..-)Here seems to be opened the whole question.-) - Iliana_Hauck commented on March 20th 20 at 11:52
@Lillie72, if few points and easy adaptation, it is possible classes, again without js - Margot_Ortiz commented on March 20th 20 at 11:55
@Moses, Yes, a maximum of 3 points on each image. How will it work classes?Modifiers just hang up on them and calculate? The idea I think that will be fine most likely.
Thanks for the good tips!-)
Happy holidays everyone! - Iliana_Hauck commented on March 20th 20 at 11:58
@Lillie72, Yes, that's right - Margot_Ortiz commented on March 20th 20 at 12:01
@Moses, Hello, did a similar example on your advice, the text moves everything is OK, but I added there is still the animation, which is a separate image and is supplied via left, top to the point of the picture, to do both, and she moved behind the point. here is an example https://jsfiddle.net/rocy7xg5/ - Dion commented on March 20th 20 at 12:04
@domingo_Kr, but rather, to identity decreased. so she moves on ideas but does not decrease as the main picture. - Dion commented on March 20th 20 at 12:07
@Daren, a Good option, but I a little differently it seems to have done, how do I resolve the issue with the adaptation point, and to move beyond the point animation point and identity were diminished as the main picture and the point that is in the picture, here's an example worker: https://jsfiddle.net/rocy7xg5/ - Dion commented on March 20th 20 at 12:10
@domingo_Kr, Well, same everything.
https://jsfiddle.net/705xjde6/ interest only count accurately. - Margot_Ortiz commented on March 20th 20 at 12:13
@Moses, about, works, thank you very much, how to and decreased this anime picture. - Dion commented on March 20th 20 at 12:16
@domingo_Kr, sizes in %, it and its parent have div' - Margot_Ortiz commented on March 20th 20 at 12:19
@Moses, can not correctly asked a question, I'm talking about adaptability, right now, the background picture, the road with points is reduced by squeezing the screen, all right, but as yet this animated point to make and she declined. - Dion commented on March 20th 20 at 12:28
@domingo_Kr, of course does not work, 139 px is not 100% width of the parent. If to estimate by eye, somewhere in the area of 10-13% should be. Do the math on a calculator or adjust via the developer tools.
Height using proportions https://jsfiddle.net/Moses/cLhxv7eq/

The picture don't forget to max-width 100% ask - Margot_Ortiz commented on March 20th 20 at 12:31
@Moses, and understood, that is, width: 139px; height: 141px; replace px with % and adjust the numbers. it is the parent, and how to be a class for the image?

.ia{
position: absolute;
-webkit-animation: pulsate .5s infinite alternate;
animation: pulsate .5s infinite alternate;
} - Dion commented on March 20th 20 at 12:34
@domingo_Kr,
how to be a class for the image?


The picture don't forget to max-width 100% ask


I think that is enough.

If not, then in the sandbox. - Margot_Ortiz commented on March 20th 20 at 12:37
@Moses, and here is the result. https://jsfiddle.net/naqu3fdo/ - Dion commented on March 20th 20 at 12:40
@domingo_Kr, almost cool, a little bit to move more

I would even put kruglaja from the background. Would impose their absolute and active start pulsing. Then will not have to play fit hundredths and thousandths of a percent. - Margot_Ortiz commented on March 20th 20 at 12:43
@domingo_Kr, but still shrinking the browser, the changes are still there a small. but not very noticeable, which is not exactly the point which the effect is drawn up. - Dion commented on March 20th 20 at 12:46
@domingo_Kr, well, I told you the height in proportion to width ask, not from the parent - Margot_Ortiz commented on March 20th 20 at 12:49
@Moses, I do not quite understand even got confused. - Dion commented on March 20th 20 at 12:52
@Moses, trimmed the source of the pictures made width: 140px; height: 140px; right square was. - Dion commented on March 20th 20 at 12:55
How best to level, disable animago and pick up a percentage of the width: %; height: %; a parent, yet will not lay down in the nose all the millimeters, I could do exactly to put the point the point that in the picture, but still there but when you shrink the browser screen, there are changes, is not feasible?

pixels
width: 140px;
height: 140px;

percentage
width: 11.9%;
height: 11.9%;

everything went smoothly, sort of )) point to point.
5cdc47d6a22a0973889556.jpeg - Dion commented on March 20th 20 at 12:58
@domingo_Kr,
How best to level, disable animago and pick up a percentage of the width: %; height: %

Yes, I did. With a running animation I just get motion sickness )))
But again, height is not necessary to put in dependence on the size of the large images, the height depends on the size of the small picture.

when you shrink the browser screen, there are changes, is not really to make

I think what's next is rounded browser. Therefore, I suggest to remove risovannye kruglyashi. - Margot_Ortiz commented on March 20th 20 at 13:01
@Moses, Well I did and everything was OK ! solved the problem with small shifts in adaptation. - Dion commented on March 20th 20 at 13:04
@Moses, Hello, faced with another example, where the picture is not great, here's an example.
https://jsfiddle.net/qp4vrcza/1/

The picture is stretched, what to do?
How normally do so I can point a normal supply and adapted normally.

Went through various options and did not work, the option above which overthrown Daren tried it, and identically the same. - Dion commented on March 20th 20 at 13:07
@domingo_Kr, the logic seems simple: if the picture does not have to stretch, then parent should be fixed. If the picture can be stretched to a certain size, the size of the parent is limited. - Margot_Ortiz commented on March 20th 20 at 13:10
@Moses, stretched all the unit and the picture should be, but the example which I took off, see what's odd is it stretched too. all adaptive should be. - Dion commented on March 20th 20 at 13:13
@domingo_Kr, the Original width of the picture 206px you let her reach up to 1200. It is almost 5 times.

If it is difficult to think abstractly, draw pictures of how things should look on different width or on different screens. - Margot_Ortiz commented on March 20th 20 at 13:16
@Moses, So I posted an example and wrote and asked how to do what I want.
https://jsfiddle.net/qp4vrcza/1/ - Dion commented on March 20th 20 at 13:19
@domingo_Kr, Send, please, the next response, the screenshot/mockup of how you want to look on different resolutions. I don't see it. - Margot_Ortiz commented on March 20th 20 at 13:22
@Moses, that's an example https://jsfiddle.net/qp4vrcza/1/, the picture is stretched more than it is, it is necessary that it is not stretched more than it is.

Tried to do but failed, all clearly adapted. - Dion commented on March 20th 20 at 13:25
@domingo_Kr, the picture width is 206px, so you need to limit the width of the block to 206px. With height is similar. - Margot_Ortiz commented on March 20th 20 at 13:28
@Moses, the Block adaptive in this picture. I described above what I want to do, if you don't know what to write, and there is so much spam out is not on.

.cnt {
 max-width: 1200px;
 min-width: 280px;
 margin: 0 auto;
 padding: 0 50px 0 50px;
 background: #111016;
}
- Dion commented on March 20th 20 at 13:31
@domingo_Kr, Anton, several times I asked them to draw what it should look like on 320-768-960-1200 (your viewporty substitute). You're talking the same thing that I want to stretch but don't stretch out.

The picture width is 206 pixels. A block maximum width of 1200.
Then you want it was adaptive, i.e. it occupied the width of the block (or both?), but not stretched? This is nonsense, the geometry won't allow it.

You can simply center the rest to fill in the background, then it will not stretch. Since the minimum block width 280px, and the picture is smaller than this minimum width, you will have no problems.
Type so https://jsfiddle.net/5bcks081/ - Margot_Ortiz commented on March 20th 20 at 13:34
@Moses, )))))))), Yes I did and the points that the text going from left to right. here in your example, it is not clear that the left, text on the points they are top and should be on the side and if the picture is not responsive, it won't all fit, that's the problem. and the picture itself is not the center should be, and left.
There is another problem, the text in 3 lines ! and it is necessary that he was pulled every string, and it snapped to max-width: 206px; though like the text over the picture.

You can make the text width: 300px;, then it stretches as it should, here is an example.
https://jsfiddle.net/kw7fesp3/

Here's a look and you will understand why the need for the adaptation of images and that the text followed the point, if you compress to 280px screen, it does not fit all. So I was trying to make is that the picture was compressed. - Dion commented on March 20th 20 at 13:37
@domingo_Kr, OK, let's simplify.
Put block cnt minimum possible width, while fixed. I understand that it is 280px.
And overstate all like this fixed-width.
Check the size and position of the text, it's simple, even without % in positioning, adaptive etc.
It is necessary for beauty to reduce picture reduce, it is necessary to change the font size - change.
To adaptive'll come back later.

Red frame is 280 https://jsfiddle.net/1darqptb/

For example: https://jsfiddle.net/1darqptb/1/
I reduced the font and the picture.
I guess it makes sense to reduce padding from cnt.
Maybe only padding, and a picture to leave as is.
I don't know what's in the mind of the designer.

Just short svarstyti for minimum width, so that you like how it looks. - Margot_Ortiz commented on March 20th 20 at 13:40
https://jsfiddle.net/1darqptb/1/ well, all right, why do something if there are options already adaptive, well, your option, and the point was to do it ), there is nothing adaptive ) and need to not be centered there, and on the left side of the container. Fadingi can not touch, on them there was no question.

All, here is what we need, I'm there a little corrected, https://jsfiddle.net/4mcyeb6f/
All actually easier than I thought, I stirred up such odd but not out.

Thanks with the tips. - Dion commented on March 20th 20 at 13:43
@domingo_Kr,
Fadingi can not touch, on them there was no question.

It makes sense to touch, because the width of the 380 coming out, and cellphones 320-360 and so will a horizontal scroll. - Margot_Ortiz commented on March 20th 20 at 13:46
March 20th 20 at 11:24
Solution
Position in percentage or using js
and how to use js ?the question was in this principle.. - Iliana_Hauck commented on March 20th 20 at 11:27
And interest, the question is, what about that position? those red circles on the picture or image and need to position the wrapper relative to their total? And the question is still what it is, and if you reduce the height, the image that still somehow fit in, but the objects on it(red circles), the idea seems to me the slide.. - Iliana_Hauck commented on March 20th 20 at 11:30
@Lillie72, uh... listen to the resize event, recalculate the size - markus.Frami43 commented on March 20th 20 at 11:33
understood. thank you. I'll try. - Iliana_Hauck commented on March 20th 20 at 11:36

Find more questions by tags CSSJavaScript