How do you put the two edges of the suspension on the image based on the width of the fist?



  • How do you do the same job?
    So that the suspension is extended or suspended depending on the number of symbols in the line?
    And how can we change the prints, depending on the design?
    Is there a solution? I'll be grateful for any information.

    введите сюда описание изображения



  • The first solution is that:

    1. We have three blocks of absolute opposition. Text and 2 chain blocks.
    2. The first unit shall be placed at the centre of the unit when the text is altered by computing the width of the unit with the text and the parent unit.
    3. We're handwriting the top of the chain.
    4. Determine the top of the text.
    5. Make a block with the beginning at the top of the chain and a long equal distance between the top points of the chain and the top points of the text. And turn the css block rotate to the angle, which is calculated at the same two points (upper points of the chain and the top points of the text).
    6. Against the backdrop of the blocks set up, we're replaying the chain.

    Support for rotate is required.

    If there's any questions I'd like to elaborate.

    введите сюда описание изображения

    1. The text block shall have a width:auto;position:absolute;top:200px(for example). Through JS, we define the breadth of the block and the breadth of the work area. Then left the block with the text. (ширина области - ширина блок)/2♪ In this way, we find the coordinates of point B (top:200;left: just found out).
    2. The coordinates of point A should be tough in JS.
    3. How to obtain the coordinates of points B and D described in 2 paragraph
    4. We get the coordinates of point A1 from the coordinates of points A and B, I think the figure will be clear. We've got a triangle on it, we can find out the long side of AB, which will be the width of our new block. The beginning of the block will be at point A. And on the AA1B triangle, we can find a corner to turn.

    The second side of the chain is about the same.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2