позиционирование изображения после загрузки

Question

У меня возникла проблема с позиционированием изображений (центрирование в контейнер контейнера) после их загрузки. 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'}); 
    } 
});