Question

我正在使用一个wordpres网站（带有创世纪）。如果站点管理员决定更改其中一个页脚中的图像大小，我需要将其设置为自动重新调整页脚区域的大小。

我有一些jquery代码，但它似乎没有工作。

'use strict';
// Get current browser width
var browserWidth = jQuery(window).width();

// Responsive: Get Width
jQuery(window).resize(function() {
    browserWidth = jQuery(this).width();

    // Set size of footer-widgets-*
    selectorSizing( browserWidth );
});

/*
 * Resizes the selector to the designated size
 *
 * @param int    size     Browser Size to do nothing
 * @param string selector Selector, defaults to '#footer-widgets .widget-area'
 */
function selectorSizing( size, selector ) {

    var heights = [];

    // selector as optional argument
    if ( !selector)
        var selector = '.footer-widgets ';

    // size is required
    if ( !size)
        return false;

    // Responsive Code
    // Widgets move to 100% width if width of the browser window is < 300px
    // Done via @media only screen and (max-width: 300px) { } in style.css
    if( 300 < size ) {
        jQuery(selector).each( function( index, value ) {
            heights[index] = jQuery(this).height();
        });

        // Set max height
        var max = Math.max.apply( Math, heights );

        // Assign max height to the footer-widgets
        jQuery(selector).each( function( index, value ) {
            jQuery(this).height(max);
        });
    }
    else {
        // Remove max height to the footer-widgets
        jQuery(selector).each( function( index, value ) {
            jQuery(this).height('auto');
        });
    }
}

selectorSizing( browserWidth );

https://jsfiddle.net/d4q05to6/8/

更新：我想让两个黄色框的高度相同。如果网站用户决定更改图像或更大/更小的图像，则需要调整两个黄色框以使它们具有相同的高度。

Answer 1

对于网站的桌面版本，一个选项是使用CSS中的显示表变体使页脚表现为表格。

.footer-widgets{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.footer-widgets .wrap{
    display: table-row;
}
.footer-widgets .wrap .widget-area{
    display: table-cell;
    vertical-align: middle;
}

以下是相同

的更新fiddle

Answer 2

试试这个 - 它应该是响应。您可以调整媒体查询断点以匹配您的模板。

如果您需要流畅的页脚，则需要删除小部件区域的固定width并使用基于百分比的宽度。还要相应地调整父元素和子元素。

请参阅demo - 尝试调整窗口大小

使页脚小部件重新调整大小到相同的高度

2 个答案: