wordpress运用jQuery安排图片宽莫大

原创

wordpress运用jQuery安排图片宽莫大

wordpress运用jQuery安排图片宽莫大

即日重庆SEO来谈谈Wordpress中心创造的详细题目

控制作品实质页中图片的最大宽窄,以提防图片胜过暂时页面宽窄形成横向震动条

常常用的多的本领即是在CSS中运用overflow:hidden 和 max-width:600px 来控制,然而功效不理念

冬镜今天性享一下比拟完备的本领

jQuery安排图片宽莫大

等比率安排图片的高和宽

本领一:jQuery 代码(荐)

此刻大局部的网站都运用了 jQuery库,以是咱们只需增添底下的 jQuery 代码即可实行

$(document).ready(function() {

$(‘.post img’).each(function() {

var maxWidth = 600; // 图片最大宽窄

var maxHeight = 2000; // 图片最大莫大

var ratio = 0; // 缩放比率

var width = $(this).width(); // 图片本质宽窄

var height = $(this).height(); // 图片本质莫大

// 查看图片能否超宽

if(width > maxWidth){

ratio = maxWidth / width; // 计划缩放比率

$(this).css(“width”, maxWidth); // 设定本质表露宽窄

height = height * ratio; // 计划等比率缩放后的莫大

$(this).css(“height”, height * ratio); // 设定等比率缩放后的莫大

}

// 查看图片能否超高

if(height > maxHeight){

ratio = maxHeight / height; // 计划缩放比率

$(this).css(“height”, maxHeight); // 设定本质表露莫大

width = width * ratio; // 计划等比率缩放后的莫大

$(this).css(“width”, width * ratio); // 设定等比率缩放后的莫大

}

});

});

本质运用时提防窜改 $(‘.post img’) 为你作品实质的class值以及最大宽窄莫大

二、纯Javascript代码

<script type=”text/javascript”>

function ResizeImage(image, 插图最大宽窄, 插图最大莫大)

{

if (image.className == “Thumbnail”)

{

w = image.width;

h = image.height;

if( w == 0 || h == 0 )

{

image.width = maxwidth;

image.height = maxheight;

}

else if (w > h)

{

if (w > maxwidth) image.width = maxwidth;

}

else

{

if (h > maxheight) image.height = maxheight;

}

image.className = “ScaledThumbnail”;

}

}

</script>

实行功效和上头第一种一律,只然而不须要援用jQuery 库

请树立最大莫大和宽窄值在颁布作品时要手动给每份图片增添一个class=”Thumbnail”属性

好了即日的教程到这边中断,即使你有好了wordpress源码插件欢送来投稿

免责声明: 本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
转载请注明出处:
新未来网 » wordpress运用jQuery安排图片宽莫大

提供最优质的资源集合

赞助会员 了解详情