php 自动拉伸图片,css/js 图片自适应、自动满屏和拉伸问题解决 | SDT技术网

网站要自适应，其中一个工作就是必然要对图片的宽度进行处理。一般来说，网站图片插入的时候，编辑器会自动增加width和height的值，也就是图片的宽度高度，虽然可以去掉，也可以定义，但是也比较麻烦。下面给出几个方案

自适应大小

首先通过浏览器-审核元素-定位到img图标标签的上一层DIV，或者直接把所有图片的宽度都自适应。直接用img也可以。

上面图片可以看出定位到 .tab-content ，那么代码如下：

.tab-content img {

max-width:  100%;

width: auto;

height: auto;

}

这里的max-width是定义最大宽度，也就是最大的宽度是多少，可以是固定值也可以是比例。

自动满屏

上面这个方法，有时候在屏幕比较大的时候，图片又显得比较小了。比如图片750px，实际的地方又按照比例分配剩下比较大的空间，想填充满屏，或者几乎满屏，可以这样。

.tab-content img {

max-width: 100%;

width: auto;

height: auto;

min-width: 100%;

}

这里介绍下，min-width 是定义最小宽度，也就是最小显示多少，可以是固定的值也可以是百分比。

图片拉伸解决

就象前面所说的，也是这个文章重点写的(毕竟上面的内容网上应该还是很多介绍的)。插入图片会自动载入宽度高度。定义了宽度，高度就会拉伸，但是页面又是就近原则处理的，也就是会收到height的影响。那么我们可以去掉这个高度吗？手工去掉显然太麻烦。所以用JS。

var arr = $('img');

arr.each(function() {

$(this).css('height','auto');

});

上面这个方法，可以给img标签添加height="auto"的定义。这样如果原来有定义高度的会被覆盖掉。

PS：需要jquery库的支持哈。