加載後的圖像定位

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與left或top

$(".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'}); 
    } 
});