调整 div 内动态内容的大小和居中

【问题标题】：Resize and center dynamic content inside a div调整 div 内动态内容的大小和居中
【发布时间】：2014-10-21 10:02:58
【问题描述】：

我正在尝试在 div onLoad 中调整动态内容的大小并将其居中，并调整窗口大小以适应我的液体布局。

为了便于理解，发个链接< http://jsfiddle.net/h52tqaz2/">fJSFiddle >。

为什么它在加载时不将所有 DIV 居中（但在调整大小时会居中）？如何通过保持其纵横比来根据窗口的高度以及窗口的宽度进行缩放？

注意：动态内容的大小不同。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

使用ready 而不是onload：

$(document).ready(center_images);
$(window).resize(center_images);

function center_images() {
    var parent_width = $('.container').width();
    $('.content').each(function() {
        var content_width = $(this).width();
        var margin = (parent_width-content_width)/2;
        $(this).css('left', margin);
    });
}

Check JSFiddle Demo

【讨论】：

谢谢。不错的清理。知道如何在调整窗口大小时保持纵横比吗？代码水平而不是垂直缩放内容。
@JonaNathali：我不确定maintaing the aspect-ratio while resizing the window 是什么意思，但我认为您的问题已得到解答，而您正在问另一个问题。