使用jquery垂直对齐动态加载的图像

Vertically aligning dynamically loading images using jquery

本文关键字：加载 图像 动态 对齐 jquery 垂直 使用      更新时间：2023-09-26

我想动态对齐div中加载的图像。我想了一个解决方案，可以得到父div的高度，得到当前加载图像的高度，然后从父div中减去这个高度，除以2。。像这样的。。

$(".gallery a").click(function (evt) {
      evt.preventDefault();
      $(".image").empty().append( 
      $("<img>", {src: this.href})
      );
    });

在这里我想添加这样的东西，但我不知道的确切代码

$("<img>", {src: this.href, style: (margin-top:350-src.height()/2})

其中350表示我的父div高度。。请给我一个代码。。我已经尝试了所有的东西，但没有其他东西对这些动态加载的图像有效。

'mydesirednumber'变量在我下面发布的代码中，包含"获取父div的高度和当前加载图像的高度，并将其从父div中减去并除以2"的答案

下面的例子假设您有这样的DOM结构：

GALLERY
  - DIV CLASS="thatdiv"
     -IMAGE
     -IMAGE
     -IMAGE
  - A (anchor)
  - A (another anchor)...

代码如下：

$(".gallery a").click(function (evt) {
      evt.preventDefault();
      //whatever else you wanted to do before, here
      var parentdivheight = $('.thatdiv').height();
      var imageheight = $(<<WHEREVER-CURRENTLYLOADING-IMAGE-IS>>).height();
      var mydesirednumber = (parentdivheight - imageheight)  /2 ;
       //whatever else you wanted to do after, here
    });
相关文章：