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

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

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

自适应大小M5q免费资源网

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

M5q免费资源网

上面图片可以看出定位到 .tab-content ,那么代码如下:M5q免费资源网

.tab-content img { 
max-width:  100%; 
width: auto; 
height: auto; 
}

这里的max-width是定义最大宽度,也就是最大的宽度是多少,可以是固定值也可以是比例。M5q免费资源网

自动满屏M5q免费资源网

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

.tab-content img { 
    max-width: 100%; 
    width: auto; 
    height: auto; 
    min-width: 100%; 
}

这里介绍下,min-width 是定义最小宽度,也就是最小显示多少,可以是固定的值也可以是百分比。M5q免费资源网

图片拉伸解决M5q免费资源网

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

var arr = $('img'); 
arr.each(function() { 
   $(this).css('height','auto'); 
});

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

PS:需要jquery库的支持哈。M5q免费资源网

返回顶部
顶部