帖子内容中的全宽图片

时间:2015-10-15 作者:Simon

这篇文章的内容包含在div 它位于页面的中心,因此帖子中的任何图像都将被限制在该页面的宽度内div. 下图说明了我想要实现的目标。

下面的链接中可以找到一个很好的例子,但我不知道JavaScript是如何做到这一点的。

https://theintercept.com/drone-papers/manhunting-in-the-hindu-kush/

enter image description here

3 个回复
SO网友:Ezra Free

我相信您会希望将图像设置为div上的背景图像(使用内联CSS)。在模板的PHP中,您可以使用以下内容获取全尺寸特色图像的URL(当然是在循环中):

$image_url = wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) );
然后,要将此图像指定为背景图像,请执行以下操作:

<div<?php if( $image_url ) { ?> style="background: url(<?php echo $image_url; ?>) no-repeat center center; background-size: cover;"<?php } ?>>

SO网友:Aric Watson

如果您查看站点并打开开发人员工具,您可以看到他们正在操纵margin-leftwidth 通过javascript为该图像创建css属性。可能他们用的是resize event 在jQuery中监视屏幕大小的变化,重新计算新的margin-leftwidth 必需,并通过javascript进行设置。这个margin-left 将根据您的具体布局而有所不同,但screen.width 无论为图像设置的宽度是多少,都应该工作。

SO网友:williamshishui

如果您使用的是WordPress,我假设您拥有此类内容:.entry-content 通常用于在内容内全宽显示图像的对齐方式为.alignnone

我们可以使用jquery函数来操作图像宽度,包括边距,以便使用alignnone类的图像将被拉伸以适合任何浏览器的全宽。我更喜欢同时进行缓存。尝试以下操作:

(function (window, $) {
    \'use strict\';

    // Cache element
    var document = window.document;

    var dis = function () {
        var cache = {};

        function init() {

            cacheElements();

            bindEvents();
        }

        function cacheElements() {
            cache.$window       = $(window);
            cache.$document     = $(document);

            // Test for iPod and Safari
            cache.isiPod        = isiPod();
            cache.isSafari      = isSafari();
            cache.$body         = $(\'body\');
            cache.$isHomepage   = cache.$body.hasClass(\'home\');
            cache.$isSingle     = cache.$body.hasClass(\'single\');
            cache.$entryContent = cache.$body.find(\'.entry-content\'); // class for default WordPress\' post
            cache.$fullImages   = cache.$entryContent.find(\'.alignnone\'); // class for image with none alignment. Images with this alignment will be the target of full width images displayed within content
            cache.$windowWidth  = cache.$window.width();

            cache.$others       = [];
            cache.$page         = 1;

            cache.windowHeight  = (true === cache.isiPod && true === cache.isSafari) ? window.screen.availHeight : cache.$window.height();
        }

        /**
         * Setup event binding.
         *
         */
        function bindEvents() {
            // Enable the mobile menu
            cache.$document.on(\'ready\', function() {
                setupRetinaCookie();
                setupFullWidthImages();
            });

            cache.$window.on(\'resize\', function() {
                setupFullWidthImages();
            });

            var lazyResize = debounce(resetHeights, 200, false);
            cache.$window.resize(lazyResize);

        }

        function setupFullWidthImages() {
            cache.$fullImages.each(function(){
                var _this = $(this);

                if( _this.hasClass(\'wp-caption\') ) {
                    _this.css( { \'margin-left\': ( ( cache.$entryContent.width() / 2 ) - ( cache.$window.width() / 2 ) ), \'max-width\': \'none\' });
                    _this.add(_this.find(\'img\')).css( \'width\', cache.$window.width());
                }else{
                    _this.css( { \'margin-left\': ( ( cache.$entryContent.width() / 2 ) - ( cache.$window.width() / 2 ) ), \'max-width\': \'none\', \'width\': cache.$window.width() });
                }
            });
        }

        /**
         * Set \'retina\' cookie if on a retina device.
         *
         */
        function setupRetinaCookie() {
            if( document.cookie.indexOf(\'retina\') === -1 && \'devicePixelRatio\' in window && window.devicePixelRatio === 2 ){
                document.cookie = \'retina=\' + window.devicePixelRatio + \';\';
            }
        }

        /**
         * Check if device is an iPhone or iPod
         *
         */
        function isiPod() {
            return (/(iPhone|iPod)/g).test(navigator.userAgent);
        }

        /**
         * Let\'s check if browser is Safari
         *
         */
        function isSafari() {
            return (-1 !== navigator.userAgent.indexOf(\'Safari\') && -1 === navigator.userAgent.indexOf(\'Chrome\'));
        }

        /**
         * Calculate and set the new height of an element
         *
         */
        function setDivHeight(element, others) {
            // iOS devices return an incorrect value with height() so availHeight is used instead.
            var windowHeight = (true === cache.isiPod && true === cache.isSafari) ? window.screen.availHeight : cache.$window.height();
            var offsetHeight = 0;

            // Add up the heights of other elements
            for (var i = 0; i < others.length; i++) {
                offsetHeight += $(others[i]).outerHeight();
            }

            var newHeight = windowHeight - offsetHeight - parseInt( $(\'html\').css(\'margin-top\') );
            // Only set the height if the new height is greater than the original
            if (newHeight > 0) {
                $(element).outerHeight(newHeight);
            }
        }

        /**
         *
         * Based on Underscore.js.
         *
         * @link    http://underscorejs.org/#debounce
         *
         */
        function debounce (func, wait, immediate) {
            var timeout, args, context, timestamp, result;
            return function() {
                context = this;
                args = arguments;
                timestamp = new Date();
                var later = function() {
                    var last = (new Date()) - timestamp;
                    if (last < wait) {
                        timeout = setTimeout(later, wait - last);
                    } else {
                        timeout = null;
                        if (!immediate) {
                            result = func.apply(context, args);
                        }
                    }
                };
                var callNow = immediate && !timeout;
                if (!timeout) {
                    timeout = setTimeout(later, wait);
                }
                if (callNow) {
                    result = func.apply(context, args);
                }
                return result;
            };
        }

        // Initiate the actions.
        init();
    };

    // Instantiate the "class".
    window.dis = new dis();
})(window, jQuery);
这应该可以完成任务。使用这些功能,每个对齐无对齐的图像都将拉伸到全宽,以适合浏览器。

如果其他人有任何简单的建议,请在此添加。