jquery - 加载后的图像定位

Question

加载图像后，我在定位图像（以 div 容器为中心）时遇到问题。我使用的 Javascript 代码适用于 PHP，但有一个问题，可能是因为我使用 Url.Action。有些影像移动，有些影像停留。

              foreach(GetFriendsItem hItem in (List<GetFriendsItem>)Model)
              {
                  Html.RenderPartial("~/Views/Users/_UserProfile.cshtml", hItem );
              }

/Views/Users/_UserProfile.cshtml

<img src="@Url.Action("Show", "Image", new { id = @Model.m_unUserID })" class="imageNarrowly image" />

javascript

 $(function() {

    $(".image").load(function(index, val){
      // dimensions of the image
      var imageWidth = $(this).width();
      var imageHeight = $(this).height();

      var parentHeight = $(this).parents($(this).parent).height();
      var parentWidth = $(this).parents($(this).parent).width();


      if (parentHeight > imageHeight){
        topOffset = (parentHeight/2 - imageHeight/2);
        $(this).css({'top': topOffset}); 
      }

      if (parentWidth > imageWidth){
        leftOffset = (parentWidth/2 - imageWidth/2);
        $(this).css({'left': leftOffset}); 
      }
    });


  });

Answer 1

与或一起使用position属性lefttop

$(".image").load(function(index, val){
  // dimensions of the image
  var imageWidth = $(this).width();
  var imageHeight = $(this).height();

  var parentHeight = $(this).parent().height();
  var parentWidth = $(this).parent().width();


  if (parentHeight > imageHeight){
    topOffset = (parentHeight/2 - imageHeight/2);
    $(this).css({'top': topOffset,'position':'relative'}); 
  }

  if (parentWidth > imageWidth){
    leftOffset = (parentWidth/2 - imageWidth/2);
    $(this).css({'left': leftOffset,'position':'relative'}); 
  }
});