jquery控制图片自适应

一般我们设计文章内容页的时候,都会给图片限制一个最大宽度:

max-width:100%;

这样图片不会超过容器的宽度。

不过在编辑网站内容的时候,经常会用到一些第三方的编辑插件,例如ueditor、KindEditor等,他们可以对图片进行拉伸,自定义排版,而样式一般是直接写在style上的。

这样我们在css文件里面的样式就会不生效,这个在pc上问题不大,因为调整的时候就是针对pc页面,不过用手机浏览我们一般是图片占一行或者90%以上的宽度。这个时候编辑器的样式就会造成拉伸变形。

由于是直接在style属性上面,所以css文件的设定就会失效,这个时候只能用js(jquery)来控制图片了。

例子为控制class为content的div里的图片,
引入jquery后,在页面底部加上这个:

<script type="text/javascript">
$(function () {
        $('.content').find('img').each(function () {
            $(this).css({width:'100%',height:'auto'});
        });
});
</script>

标签: img比例, jquery