在“溢出：隐藏”div 中调整 img 的大小和居中

Question

我想创建一个 javascript/jquery 函数，它将调整任何设置尺寸的 img 大小（同时保持纵横比），以便它填充任何设置尺寸的父 div（具有溢出：隐藏集）而没有间隙。图像应沿其自身与父级之间差异最大的任何维度（宽度或高度）调整为父级，然后沿另一个维度居中。

这是我到目前为止的进展：

$.each( $(".img_for_video_thumbnail"), function(index, value) {

  $("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(this).attr("src"))
    .load(function() {

      var pic_real_width, pic_real_height, width_difference, height_difference;

      var pic_real_width = this.width;   // Note: $(this).width() will not
      var pic_real_height = this.height; // work for in memory images.
      var parent_width = this.parent().width;
      var parent_height = this.parent().height;
      var width_difference = pic_real_width - parent_width;
      var height_difference = pic_real_height - parent_height;

      if ( width_difference >= height_difference ) {

        // Do something...but what?

      }
 });
});

如果有帮助，我正在将 Django 与 Google App Engine 结合使用。

Answer 1

知道了！

（编辑我犯了一个错误，必须修复它）

http://jsfiddle.net/uuVeD/6/

只需查看按钮大小调整子按钮的功能。

祝你编码顺利