你可以这样做:
将您的标记更改为此
<figure class="figureFeatured">
<img class="yourImgClass" src="wp-content/uploads/featuredImage-150x150.jpg" data-responsive="wp-content/uploads/featuredImage-300x213.jpg"/>
这将首先包括移动图像,符合响应式的最佳实践。确保您的图片在您的 CSS 中设置为 max-width: 100%
Javascript 方面,此代码将为您提供视口宽度,然后在调整窗口大小时交换图像 - (将 breakPoint 变量更改为适合您的需要)
/*! viewportwidth.js 0.1.1 | Author: Brett Jankord, 2012 | License: MIT */
/* https://github.com/bjankord/viewportwidth.js */
function getViewportWidth() {
var vpw, w = window,
webkit = (!(window.webkitConvertPointFromNodeToPage == null));
// Webkit and IE 6-8
if (webkit || !(typeof (window.innerWidth) == 'number')) {
vpw = document.documentElement.clientWidth;
}
// Everything else
else {
vpw = w.innerWidth;
}
return vpw;
};
// doc ready
jQuery(function () {
// xcounter var to indicate if function has run
var hasSwapped = 0;
// function to switch images to larger images
function swapImages() {
// for each image
jQuery('.yourImgClass').each(function () {
// cache selector
var $this = jQuery(this);
// get new src attribute
var newSrc = $this.attr('data-responsive');
// assign new image source
$this.attr('src', newSrc);
// update counter so function doesn't keep running
hasSwapped = 1;
});
}
// set breakpoint width
var breakPoint = 850;
// on resize of window
jQuery(window).resize(function () {
// assess the width of the viewport
var currentWidth = getViewPortWidth();
// if the current width is bigger than the required breakpoint and the function has not been run
if (currentWidth >= breakPoint && hasSwapped < 1) {
// run the swap image function
swapImages();
}
}); // end resize
// you may also want to check you have the right image on doc ready as well, so you could do this:
// get viewportWidth
var initWidth = getViewPortWidth();
// if the initial width is bigger than the required breakpoint and the function has not been run
if (initWidth >= breakPoint && hasSwapped < 1) {
// run the swap image function
swapImages();
}
}); // close doc ready
希望能有所帮助 - 马克