css/js 图片自适应、自动满屏和拉伸问题解决

来自:互联网
时间:2018-08-19
阅读:

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

返回顶部
顶部