이미지의 크기 조정을 기준으로 이미지의 span 요소를 만드는 방법은 무엇입니까?

Question

나는 사무실 배치에 모든 직원을 배치하는 신청이있다. 사무실 레이아웃 이미지가 있고 각 직원의 Json은 레이아웃에서 직원의 위치를 ​​나타내는 x 및 y 좌표를 갖습니다. 이미지는 패널에 배치되고 창 크기를 조정하면 이미지의 크기도 그에 따라 조정됩니다. 그러나 직원의 위치는 조정되지 않습니다.

$("#empMap").load(function() {//loading the image of the plant 
      img_width = this.width; 
      img_height = this.height; 
      console.log("getting the values of the images"); 
      var img_left = $("#empMap").position().left; 
      var img_top = $("#empMap").position().top; 
      var y = img_height + img_top; 
      $scope.xValue = img_left; 
      $scope.yValue = y -14; 
}); 

내가 위의 코드에서 뭐하는 거지 것은 내가가 xValue 및 yValue 상단에서 왼쪽 높이와 폭 값을 계산하고 있다는 것입니다 : 컨트롤러에

이

<div class='col-lg-7 col-md-6 col-sm-12'> 
      <div class='row'> 
       <div class='col-xs-12'> 
        <div class='panel panel-default'> 
         <div class='panel-body'> 
          <div id="empMap"> 
           <img rel="prefetch" alt="Image is not found" ng-src="{{officeImage}}" id="empMap" style="width: 100%;height: 100%; z-index: -1" onerror="this.src='/img/OfficeImageNotAvailable.png'"> 
           <div> 
            <div ng-repeat="emp in employees"> 
             <span class="glyphicon glyphicon-oil" id="{{emp.empId}}" ng-click="empDisplay($event)" ng-dblclick="empInfo($event)" 
               ng-style="{'cursor': 'pointer','color':'green','position': 'absolute', 
               'left': xValue + emp.location.xcoordinate, 'top': yValue - emp.location.ycoordinate, 'z-index': '2'}"/> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
</div> 

코드 : 다음은 내 코드입니다 이미지 및 내 HTML에서 x 및 y 좌표 값을이 값에 추가합니다.

이미지의 크기가 조정될 때 그에 따라 위치를 이동할 수 있는지 잘 모르겠습니다. 또한 직원의 위치가 제대로 표시되지 않습니다. 그래서 내가 여기서 누락 된 부분과이 시나리오에서 더 나은 접근 방법을 알려 주시기 바랍니다.

Answer 1

브라우저 창 크기를 조정할 때 위치를 다시 계산하기 위해 페이지가 처음로드 될 때만 함수가 실행됩니다. 함수를 다시 호출해야합니다.

$(window).resize(function() { 
    Actions Go Here 
}); 

가장 좋은 방법은 아마도 다음 그 자체 함수로 당신의 위치 계산을 수립 코드가 건조되도록 모두 .load 및 .resize에서 호출하는 것입니다.