网站要自适应,其中一个工作就是必然要对图片的宽度进行处理。一般来说,网站图片插入的时候,编辑器会自动增加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库的支持哈。