如果您使用的是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);
这应该可以完成任务。使用这些功能,每个对齐无对齐的图像都将拉伸到全宽,以适合浏览器。
如果其他人有任何简单的建议,请在此添加。