dedecms小技巧：让文章的大图片不破坏布局

时间:2019-01-01 00:00 来源: 点击:次

解决页面出现图片过大、撑破表格或不显示超出部分图片的问题

相信很多朋友，都曾遇到过，发表一篇普通文章，如果图片宽度超过内容区域大小，图片就会把表格撑大，打乱面页的布局，特别是现在网站一般都是响应式HTML5设计，自适应移动设备了，用手机看的时候，图片会被拉长，特别难看，懂CSS的朋友能会通过css来定义，让超出的部分隐藏起来，但这样，图片的美观性就很差，显示不出来超出的部分，论坛中还有一些朋友，用css方法，当图片过大后，将图片自动缩小，但是我试过，因为CSS对各个浏览器存在兼容问题，我在IE6下测试，一点作用也没有。下面给大家介绍一下我在DEDECMS里的方法（不用修改源程序，只需要在模板里使img加上JS控制代码，然后将原始图片等比例缩小）。

下面介绍两种比较简单的方法，

首先，将包含body的div加一个id属性，如下：

<div id='picContent'>
{dede:field.body/}
</div>

然后，在下面加一段js代码，如下：

<script>
var aImg=document.getElementById("picContent").getElementsByTagName('img');
for(var i=0;i<aImg.length;i++){
      aImg[i].style.height="auto";
      aImg[i].style.width="100%";
}
</script>

或者使用

<script>
    $('#picContent').find('img').css({'width': '100%', 'height': 'auto', 'border': 0});
</script>

样式picContent可以自定义修改名称，如果和页面其他样式有冲突，可以自行更换，这样就可以解决大部分文章图片自适应的问题。

(责任编辑：admin)

网页特效代码_站长素材站移动版

DeDecms教程

dedecms小技巧：让文章的大图片不破坏布局

时间:2019-01-01 00:00 来源: 点击:次