WordPress文章内容图片自适应大小缩放

2021-05-22 0 1,733 百度已收录

关于wordpress主题开发中文章图片自顺应的问题已经是老生常谈了,今天总结的二种方式给人人,希望能辅助人人解决手头的问题,其它也没有什么创新的方式,照样css与jquery的解决方式。

方式一:

将以下代码复制粘贴到主题style.css文件内即可,强制最大化宽度为600px,高度为相对高度,通过以上设置不失为一个最佳的解决方案:

  1. p img {
  2. max-width:600px;
  3. width: expression(this.width > 600 ? “600px: true);
  4. height:auto;
  5. }

方式二:

通过jQuery库来实现图片自顺应,首先我们要加载jquer库,然后以下面的代码添加到wordpress主题中的header.php文件中。可以对图片举行自动缩放,方式较为完善:

  1. $(document).ready(function(){
  2.     $('div').autoResize({height:750});
  3. });  
  4. jQuery.fn.autoResize = function(options)
  5. {
  6.     var opts = {
  7.         'width' : 700,
  8.         'height': 750
  9.     }
  10.     var opt = $.extend(true, {},opts,options || {});
  11.     width = opt.width;
  12.     height = opt.height;
  13.     $('img',this).each(function(){
  14.         var image = new Image();
  15.         image.src = $(this).attr('src');   if(image.width > 0 && image.height > 0 ){
  16.             var image_rate = 1;
  17.             if( (width / image.width) < (height / image.height)){
  18.                 image_rate = width / image.width ;
  19.             }else{
  20.                 image_rate = height / image.height ;
  21.             }
  22.             if ( image_rate <= 1){
  23.                 $(this).width(image.width * image_rate);
  24.                 $(this).height(image.height * image_rate);
  25.             }
  26.         }
  27.     });
  28. }

这两种方式可以说都通过各自的方式到达了我们想要的效果,同时照样推荐第一种,由于第二种对于不领会代码的同砚,操作成本照样对照大的。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 WordPress文章内容图片自适应大小缩放 https://zhutizhen.com/14412.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章