首页 > 文章 > 资讯 > 正文

页面内容中的图片通过js设置图片自适应大小
2020-12-02 03:08:45   来源:原创   评论:0 点击:

本人在修改PHPCMS手机内容页模板的时候遇到一个问题,就是内容页里面的图片无法自适应手机的宽度按比例缩放。需要的是如图那样,可是因为用
本人在修改PHPCMS手机内容页模板的时候遇到一个问题,就是内容页里面的图片无法自适应手机的宽度按比例缩放。



需要的是如图那样,可是因为用的PC模板改的,所以图片很大并且图片显示不全。网上搜了很多方法,但是CSS就是控制不了。今天才发现原来是在show.html页面最底下的JS里面控制,如下:
 $(function(){
  $('#Article .content img').LoadImage(true, 660, 660,'{IMG_PATH}s_nopic.gif');    
})
原来它这里控制着660的宽度。但是把它改小适合手机差不多大小320后,那么结果它就是320尺寸的小图,无法自适应手机屏幕不同尺寸不同以及横屏也是那样小图。因为它是固定尺寸无法自适应屏幕,即CSS里的img{width:100%;height:auto}无法做到。
最终用JS代码j解决了这个问题。

针对图片宽度样式会大于当前分辨率的页面处理
处理方案:首先获取所有的图片,对其遍历,判断宽度大于当前分辨率宽度的,设置其宽度样式为100%,高度样式为auto;对这个结果很满意。

//js代码如下
$('.content').find('img').each(function() {
var img = this;
if(img.width > window.screen.width) {
img.style.width = "100%";
img.style.height = "auto";
//$(img).removeAttr('height');
var aTag = document.createElement('a');
aTag.href = img.src;
aTag.target = "_blank";
$(aTag).addClass('bPic')
.insertAfter(img).append(img);
}
});

相关热词搜索:

上一篇:PHPCMS安装
下一篇:phpcms9相册图像自适应手机大小

分享到: 收藏
评论排行